Book Image

Ember.js Cookbook

By : Erik Hanchett
Book Image

Ember.js Cookbook

By: Erik 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.

Related Content you might be interested in

Current Title:

Small book image
Ember.js Cookbook
Erik Hanchett
Feb, 2016 | 308 pages
No titles found
Table of Contents (18 chapters)
Ember.js Cookbook
Ember.js Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Ember CLI Basics
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
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
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
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
Ember Controllers
Introduction
Storing application properties
Handling actions in controllers
Working with transitions
Managing dependencies between controllers
6
Ember Components
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
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
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
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
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
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 events in components

When creating components, you can attach events to them. Let's take a look at an example of this.

How to do it...

  1. In a new project, generate a new component called student-info:

    $ ember g component student-info

    This will generate a component file in the component directory and the templates/components folder.

  2. Edit the app/components/student-info.js file. Add a new click event:

    // app/components/student-info.js
import Ember from 'ember';

const {$}=  Ember
export default Ember.Component.extend({
    click() {
      $('html').fadeToggle( 'slow', 'linear');
      $('html').delay(250).fadeIn();
    }
});

    The first thing that you'll notice in this example is that we are using the ES2015 destructuring assignment. The destructuring assignment syntax extracts data from arrays or objects. Instead of typing Ember.$ everywhere, I can just type $.

    Ember CLI by default has jQuery installed. We are using the jQuery syntax to fade the HTML document and fade it back after the component...

Previous Section
End of Section 4
Next Section