Introducing the Ember.JS framework

Exclusive offer: get 50% off this eBook here
Instant Ember.js Application Development How-to [Instant]

Instant Ember.js Application Development How-to [Instant] — Save 50%

Your first step in creating amazing web applications with this book and ebook.

$12.99    $6.50
by Marc Bodmer | September 2013 | Open Source Web Development

This article by Marc Bodmer authors of Instant Ember.js Application Development How-to will help you understand the basics of Ember.js framework. It will also help in setting up Ember.js. It will also give you a brief idea on creating Ember objects and controllers. And an introduction about what is mustache templates.

(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.

Instant Ember.js Application Development How-to [Instant] Your first step in creating amazing web applications with this book and ebook.
Published: February 2013
eBook Price: $12.99
See more
Select your format and quantity:

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="http://moredetails.com">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.

Summary

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:


Instant Ember.js Application Development How-to [Instant] Your first step in creating amazing web applications with this book and ebook.
Published: February 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Marc Bodmer

Marc Bodmer is a recent graduate with an honors degree in Computer Science. He is based in Toronto, Ontario and will begin a frontend developer position at 500px (http://www.500px.com) in May 2013. Marc loves to experiment with all kinds of various web frameworks as well as creating and contributing to open source projects. He loves to attend developer conferences to keep up-to-date on web technologies and to meet developers with great ideas.

Books From Packt


WebGL Beginner's Guide
WebGL Beginner's Guide

Learning jQuery, Third Edition
Learning jQuery, Third Edition

jQuery for Designers: Beginner’s Guide
jQuery for Designers: Beginner’s Guide

Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

Corona SDK application design
Corona SDK application design

Express Web Application Development
Express Web Application Development

Ext JS 4 Web Application Development Cookbook
Ext JS 4 Web Application Development Cookbook

Instant Backbone.js Application Development
Instant Backbone.js Application Development


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
W
b
z
A
i
Y
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software