Create applications with Ember.js


If at the beginning of his career JavaScript had a role almost decorative, merely add interactivity to Web pages, over the years its role has grown allowing you to create Web pages more sophisticated. Today, the role of this language on the Web, and not only took on such importance that enable achievement of real applications, which require skills so typical of those who develop software in a professional manner.
Witness the birth of frameworks like Backbone.js or Knockout.js, which provide the developer pattern and functionality closer to those of modern programming languages.
Ember.js fits into this context by offering a rich set of features which allow you to write simple scripts, but to design and implement real Web client.

The framework Ember.js

Although the creation of this framework is relatively recent, it has its roots in SproutCore, a project started in 2007 and is widely used in some projects to Apple. He then established a code base that guarantees a certain stability.
The objective of Ember.js is described on the home page of the project: a framework for creating web applications ambitious. And in fact the functionality made available to the developer are considerable.
Supports the MVC pattern and integrates JavaScript with an object model that is close to those of object-oriented languages, with the ability to define classes to override properties and methods to create subclasses to create calculated properties and observer to define binding between two properties. It also supports a mechanism for creating namespace and provides a sophisticated template engine based on mustache.js.
In this article we will explore the approach to programming proposed by Ember.js and put to the test its main functionality by implementing a simple application that displays tweets

Setup project Ember.js

To start we download the starter kit from the project's home page. It is a zip containing everything necessary for starting with Ember.js, in particular contains an HTML page of example with the classic Hello World!.
By analyzing the HTML page we see the following inclusions:
<script src="js/libs/ember-"></script>
<script src="js/app.js"></script>


As we can see, Ember.js depends on jQuery, so you must first include this library. The last inclusion refers to the app.js file that contains the JavaScript code of the application that will be made.

Application definition

To achieve our leading example, we set the first application in the app.js file:
var CMSWIKITweets = Ember.Application.create();
From this line of code is clear that the framework makes available to the global object Ember, abbreviabile with Em, which provides all the functionality accessible from JavaScript.
In this case we have created an instance of the application calling CMSWIKITweets. This instance is the foundation that allows us to create the rest of our application and acts as a namespace to avoid name collisions with any other elements. An important requirement is the application name that starts with a capital letter so that the system can detect the binding as root within a hierarchical path.
When creating the application can perform setups, how to define the properties, methods, or manage the ready event, as shown in the following example:


var CMSWIKITweets = Ember.Application.create({
  version: '1.0',
  ready: function() {


In this case we have defined the version property by assigning a value of 1.0, and we have handled the event by displaying a message ready. Handling the ready is analogous to using the ready () jQuery and its purpose is to make sure that the DOM and the infrastructure provided by Ember.js have been completely loaded by the browser.


Definition of the model (model MVC)

We have said that Ember.js supports the MVC pattern for the realization of applications. We see that in terms of dealing with the definition of the model of our application. In practice, we're going to manage objects are represented by tweets We define the class of tweets in the following way:
CMSWIKITweets.Tweet = Ember.Object.extend({
  name: null,
  avatar: null,
  text: null,
  date: null


Notice how the definition is created as an element within the namespace of the application. The extend () method of Ember.Object allows you to define a class specifying the properties and methods provided. The values ​​assigned to properties represent the default values.
In our case, we have defined a tweet as an object that has the name of the picture used as avatar, the text of the tweet and the date and time of publication.
The actual creation of an instance of this class will be made using the create () method inherited from Ember.Object, as we will see below.
An interesting feature of Ember.js is the possibility of defining a class in subsequent steps.
In other words, you can add or override properties and methods of a class at any point in our application using the method reopen (). For example, the following code adds the property followers_count the definition of tweets given above:
  followers_count: 0

Defining the controller

The class that we have defined allows us to describe a single tweet, but our application needs to display a list of recently posted tweets. In other words, we need a structure that allows us to manage a list of objects to display in a view.
For this purpose we use a ArrayController:
CMSWIKITweets.tweetsController = Ember.ArrayController.create({
  content: []


The ArrayController provides the default property content to contain the tweet. In our case, we initialized the property with an empty array. To load tweets of in this structure create the method loadTweets ():


CMSWIKITweets.tweetsController = Ember.ArrayController.create({
    content: [],
    loadTweets: function() {
      var self = this;
          self.set('content', []);
              var t = CMSWIKITweets.Tweet.create({
                  avatar: value.user.profile_image_url,
                  text: value.text,
                  date: value.created_at


Analyze the code to see how the tweets are loaded. The function uses the Twitter API to get a list of JSON objects representing the tweets of a particular user. Once you have a list for each object is instantiated class CMSWIKITweets.Tweet and assigned values ​​to their properties. So the new newly instantiated object is added to the content property using the method pushObject () dell'ArrayController.
Of course we would like the loading tweets happen as soon as the user accesses the application pages, so let's change management application ready event:
var CMSWIKITweets = Ember.Application.create({
    version: '1.0',
    ready: function() {

View and Handlebar

Let us now concentrate on how to display tweets on the HTML page. As in any application based on the MVC pattern, a view is an interface with which the user can interact.
To define a view, Ember.js provides the developer a templating system for declarative definition of a UI element. For example, to insert the HTML page of our application the list of tweets we can define a template similar to the following:
<script type="text/x-handlebars">
<ul class="tweets">
{{#each CMSWIKITweets.tweetsController}}
<li class="tweet">
<img {{bindAttr src="avatar"}} />


We note that our template is included in a block <script> whose type is text / x-handlebars. Specifying a <script> of this type allows Ember.js to locate the template and provide the necessary resources for its production.
The framework has in fact a template engine called Handlebars that uses a syntax derived from mustache.js: expressions that need to be processed by the system are enclosed in double curly brackets. The expression:
{{#each CMSWIKITweets.tweetsController}}


indicates a cycle of processing to be performed for each object contained nell'ArrayController specified. Inside the loop we indicate how and where to display the value of the properties of each object CMSWIKITweets.Tweet.
This definition creates a real binding between the properties of our model and the view, therefore, any change in the value of the property will be automatically shown in the user interface.
If we want to bind the value of a property attribute of a tag instead of its contents should be used when bindAttr. This is in fact the approach we have adopted to establish the binding between the properties of the object and avatar the src attribute of <img>.
At this point, the implementation our application is able to display the latest tweets of

Interaction with the user

Of course, to complete the round should allow a certain user interactivity, for example to enable it to go directly to the article reported from single tweet by clicking on its element.
We implement this functionality by connecting the view with the method gotoArticle () we're going to implement in our controller CMSWIKITweets.tweetsController. To activate this link modify the template of our view by adding a new expression at <li> element, as shown below:


<li class="tweet" {{action "gotoArticle" target="CMSWIKITweets.tweetsController"}}>


In this expression we specify the action to be performed at the click on the list, indicating the method and through the target, the controller to which it belongs.

We just have to add the method gotoArticle () to the controller CMSWIKITweets.tweetsController:
gotoArticle: function(view) {
   var liElement = $(;
   document.location.href = getURL(liElement.find('p').text());


The method receives as a parameter the current view, whose target property allows us to access the element that has intercepted the click. The getURL () function extracts the URL of the article text of the tweet and you redirect the browser.

Conclusions and insights

The complete code of the application, integrated with the automatic update of any new tweets, is available in the attached article.
Of course, the application that we have implemented in this article has a didactic purpose, to introduce the approach to development with Ember.js, the framework provides a number of other possibilities for reasons of space we could not deal with here. The project site, however, provides a wealth of documentation and some guides in addition to the API reference framework.


If you want updates on CREATING APPLICATIONS EMBER.JS enter your e-mail in the box below:



Similar Content

Gallery with effect stack of images

css imageWhen he began to spread on the main browser support for CSS3 transformations, many tutorials applied this new feature to the galleries, creating the effect that here we define 'stack of images': the base image in the foreground and behind it the levels that give the illusion of a group of overlapping photos.


How to intercept SMS (with Android, Blackberry and iPhone)

how to intercept sms text

Certainly sometimes you have had to get a very important SMS and u have forgotten you smartphone at home. Even worse, though, is when you lose your smartphone and you lose all the importance of affective text messages saved in it too. Happened to you too, right? So why don’t you install on your mobile an application to intercept text messages?

Even if you are not an expert hacker, you can remotely monitor SMS present on a mobile phone and view them on any PC connected to the Internet. In what way? You have to remember don’t use this guide to intercept SMS without permission to spy mobile phones other.


Apple says stop the chip samsung

appleThe house of Cupertino and Samsung, a long time partner rehearsed in important commercial partnerships for the production of high-tech components, are now opposing parties in a Patent War worldwide, for this reason, probably, the relationship of trust between the two groups has been gradually deteriorating.
News Magazine: 

Steven Sinofsky does not explain his abandonment of Microsoft

When the news  of Steven Sinofsky's removal from the House of Redmond , former president of the Windows division, have been formulated several hypotheses about the causes of the event; voluntary abandonment or prior dismissal  to avoid promotion to CEO of the group?
News Magazine: 

What is Search as your type by Google

google search as you typeGoogle recently announced that he had made ​​available "As Search Your Type", via official blog.

It is a marketing tool reserved for advertisers, which aims to help them to increase their conversions. "Search As Your Type" is one of the features of Google Commerce Search, that Big G ​​has decided to make available to those who work with e-commerce.
News Magazine: