10. Awesome Tasks with Ember | Ember.js Cookbook

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Ember.js Cookbook

By : Hanchett

4.6 (11)

Ember.js Cookbook

4.6 (11)

By: Hanchett

Overview of this book

Ember.js is an open source JavaScript framework that will make you more productive. It uses common idioms and practices, making it simple to create amazing single-page applications. It also lets you create code in a modular way using the latest JavaScript features. Not only that, it has a great set of APIs to get any task done. The Ember.js community is welcoming newcomers and is ready to help you when needed. This book provides in-depth explanations on how to use the Ember.js framework to take you from beginner to expert. You’ll start with some basic topics and by the end of the book, you’ll know everything you need to know to build a fully operational Ember application. We’ll begin by explaining key points on how to use the Ember.js framework and the associated tools. You’ll learn how to effectively use Ember CLI and how to create and deploy your application. We’ll take a close look at the Ember object model and templates by examining bindings and observers. We’ll then move onto Ember components, models, and Ember Data. We’ll show you examples on how to connect to RESTful databases. Next we’ll get to grips with testing with integration and acceptance tests using QUnit. We will conclude by covering authentication, services, and Ember add-ons. We’ll explore advanced topics such as services and initializers, and how to use them together to build real-time applications.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Conventions

Reader feedback

Customer support

Free Chapter

1. Ember CLI Basics

1. Ember CLI Basics

Introduction

Installing Ember CLI

Creating your first project

Exploring pods and the folder layout

Asset compilation

Dependency management

Upgrading your project

Deployment

2. The Ember.Object Model

2. The Ember.Object Model

Introduction

Working with classes and instances

Working with computed properties

Working with Ember observers in Ember.js

Working with bindings

Using mixins

Using enumerables with arrays

3. Ember Templates

3. Ember Templates

Introduction

Defining an application template

Working with conditionals in templates

Displaying a list of items

Binding with element attributes and classes

Working with HTML links inside templates

Handling HTML actions

Using template input helpers

Using development helpers

4. Ember Router

4. Ember Router

Introduction

Defining an application route

Setting up a route model

Handling dynamic segments inside routes

Defining routes with templates

Using redirection with routes

Working with asynchronous routing

Loading and error handling

Using query parameters

5. Ember Controllers

5. Ember Controllers

Introduction

Storing application properties

Handling actions in controllers

Working with transitions

Managing dependencies between controllers

6. Ember Components

6. Ember Components

Introduction

Using components in an application

Using events in components

Implementing actions in components

Passing properties to a component

Using yield with components

7. Ember Models and Ember Data

7. Ember Models and Ember Data

Introduction

Understanding the functionalities of Ember Data

Creating, reading, updating, and deleting records with Ember Data

Using fixtures

Customizing the adapter and serializer

Working with relationships

8. Logging, Debugging, and Testing

8. Logging, Debugging, and Testing

Introduction

Using Ember.Logger

Using Ember Inspector

Verifying deprecations and using advanced features of Ember Inspector

Using acceptance testing

Using unit tests

Testing components

Testing routes

Testing models

Testing controllers

9. Real-Life Tasks with Ember.js

9. Real-Life Tasks with Ember.js

Introduction

Using services with a component

Managing basic authentication

Using OAuth2 with Ember Simple Auth

Using Liquid Fire to create transitions

Working with HTML5 drag and drop

Learning Bootstrap with Ember.js

10. Awesome Tasks with Ember

10. Awesome Tasks with Ember

Introduction

Using Ember validations

Using D3.js with Ember.js

Using Ember with Sockets

Using Ember with Firebase

Using server side rendering

11. Real-Time Web Applications

11. Real-Time Web Applications

Introduction

Using dependency injection

Working with application initializers

Building a chat application

Creating and working with add-ons

Learning the Ember run loop

Index

Index

Using Ember with Sockets

WebSockets make it possible to open a communication session with a server. Ember.js does not handle this natively. However, there are some easy-to-use add-ons that can be used to make this possible.

How to do it...

In a new application, generate a new route and install the WebSockets add-on:
```
$ ember install ember-websockets
$ ember g component w-s
$ ember g route ws
```
This will install the component route and add-on that we need to begin.
In the components template folder, edit the w-s.hbs file:
```
// app/templates/components/w-s.hbs
Welcome Chat!<br><br>

Received Message: {{message}}<br>
<button id="sendButtonPressed" {{action "sendButtonPressed"}}>Press Me</button>
```
In this template, we have a message property and button that sends an action, sendButtonPressed. When the action is triggered, a message is sent to the server. The message property will display any messages returned from the server.
Update the w-s.js component file so that it can...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Ember.js Cookbook

Search

Your notes and bookmarks