Introducing the Ember.JS framework

Marc Bodmer

September 2013

(For more resources related to this topic, see here.)

Introduction to Ember.js

Ember.js is a frontend MVC JavaScript framework that runs in the browser. It is for developers who are looking to build ambitious and large web applications that rival native applications. Ember.js was created from concepts introduced by native application frameworks, such as Cocoa. Ember.js helps you to create great experiences for the user. It will help you to organize all the direct interactions a user may perform on your website. A common use case for Ember.js is when you believe your JavaScript code will become complex; when the code base becomes complex, problems about maintaining and refactoring the code base will arise.

MVC stands for model-view-controller. This kind of structure makes it easy to make modifications or refactor changes to any part of your code. It will also allow you to adhere to Don't Repeat Yourself (DRY) principles. The model is responsible for notifying associated views and controllers when there has been a change in the state of the application. The controller sends CRUD requests to the model to notify it of a change in state. It can also send requests to the view to change how the view is representing the current state of the model. The view will then receive information from the model to create a graphical rendering.

If you are still unclear on how the three parts interact with each other, the following is a simple diagram illustrating this:

Ember.js decouples the problematic areas of your frontend, enabling you to focus on one area at a time without worrying about affecting other parts of your application. To give you an example of some of these areas of Ember.js, take a look at the following list:

  • Navigation : Ember's router takes care of your application's navigation
  • Auto-updating templates : Ember view expressions are binding-aware, meaning they will update automatically if the underlying data ever changes
  • Data handling : Each object you create will be an Ember object, thus inheriting all Ember.object methods
  • Asynchronous behavior : Bindings and computed properties within Ember help manage asynchronous behavior

Ember.js is more of a framework than a library. Ember.js expects you to build a good portion of your frontend around its methodologies and architecture, creating a solid application architecture once you are finished with it. This is the main difference between Ember and a framework like Angular.js. Angular allows itself to be incorporated into an existing application, whereas an Ember application would have had to have been planned out with its specific architecture in mind. Backbone.js would be another example of a library that can easily be inserted into existing JavaScript projects. Ember.js is a great framework for handling complex interactions performed by users in your application. You may have been led to believe that Ember.js is a difficult framework to learn, but this is false. The only difficulty for developers lies in understanding the concepts that Ember.js tries to implement.

How to set up Ember.js

The js folder contains a subfolder named libs and the app.js file. libs is for storing any external libraries that you will want to include into your application. app.js is the JavaScript file that contains your Ember application structure.

index.html is a basic HTML index file that will display information in the user's browser. We will be using this file as the index page of the sample application that we will be creating.

We create a namespace called MovieTracker where we can access any necessary Ember.js components. Initialize() will instantiate all the controllers currently available with the namespace. After that is done, it injects all the controllers onto a router.

We then set ApplicationController as the rendering context of our views. Your application must have ApplicationController, otherwise your application will not be capable of rendering dynamic templates.

Router in Ember is a subclass of the Ember StateManager. The Ember StateManager tracks the current active state and triggers callbacks when states have changed. This router will help you match the URL to an application state and detects the browser URL at application load time. The router is responsible for updating the URL as the application's state changes.

When Ember parses the URL to determine the state, it attempts to find Ember.Route that matches this state. Our router must contain root and index. You can think of root as a general container for routes. It is a set of routes.

An Ember view is responsible for structuring the page through the view's associated template. The view is also responsible for registering and responding to user events.

ApplicationView we are creating is required for any Ember application. The view we created is associated with our ApplicationController as well. The templateName variable is the name we use in our index.html file. The templateName variable can be changed to anything you wish.

Creating an Ember Object

An object or a model is a way to manage data in a structured way. In other words, they are a way of representing persistent states in your application. In Ember.js, almost every object is derived from the Ember.Object class. Since most objects will be derived from the same base object, they will end up sharing properties with each other. This allows the observation and binding to properties of other objects.

Creating an Ember Controller

In Ember.js, controllers are split into three different categories:

  • ArrayController
  • ObjectController
  • Controller

ArrayController is used for managing a collection of objects, that is, a collection of movies and actors. Each ArrayController uses a content property to store its data. Properties and methods in this controller will have a proxy that will allow access to its content property. In moviesController, we create an empty content array and then populate it with some example data. The this._super() call lets you access the init function of the parent class that you are overriding.

ObjectController is essentially the same as ArrayController, except that it is used for one object as opposed to a collection. For our application, we are going to need a controller for changing a movie to watched when the user clicks on a corresponding button for this action. In selectedMovieController, we are only concerned with one specific Movie object. The function inside this controller will change the watched property of the associated movie to true if it was false previously and vice versa.

The Controller class in Ember is used when you have a controller that is not a proxy. In other words, the controller does not take care of an object or an array.

If we look back at the code in our application.js within the controllers folder, we added the following:

MovieTracker.ApplicationController = Ember.Controller.extend();

This line does not need any arrays or objects contained within it, so we simply assign it the Controller class. This controller handles the controls at the application level.

Mustache Templates

This basic template has data-template-name that is typically used as a reference by a view. The {{title}} expression will print the value of the title property that we send to the template using a view.

Ember determines whether a path is global or relative to the view by checking if the first letter is capitalized. This is why your Ember.Application name should start with a capital letter.

The # symbol within {{}} means that it is a block expression. These expressions require a closing expression (such as {{/if}} in the previous example). If the movie property is not false, undefined, or null, then it will display the movie title.

{{#with movie}} <h2>{{title}}</h2> {{/with}}

We changed the context of our template block to movie in this block of code, and thus we were able to reference the title directly.

<a {{bindAttr href="url"}}>More Details</a>

When we used bindAttr for our URL, the template took the url property from the view and inserted it as an href attribute.

<a href="">More Details</a>

{{view.mainActor}} within the actor template would render as John Smith .

The {{view}} helpers in Handlebars can include optional parameters to help in displaying information.

  • class: Used to assign class names.
  • tagName: By default, new instances of Ember.View create the <div> elements. Use tagName to override this.
  • contentBinding: Binds the specified content as the context of the template block.


This article helped you understand the basics of Ember.js framework. It also helped you in setting up Ember.js. It gave you a brief idea on creating Ember objects and controllers. And explaining what mustache templates are.

Resources for Article :

Further resources on this subject:

You've been reading an excerpt of:

Instant Ember.js Application Development How-to

Explore Title