Back Home

Ember Js

Ember.js is a JavaScript framework pack that evolved out project SproutCore in 2007, heavily by Apple for various web applications including MobileMe.

Emberjs has

  • integrated with a templating engine known as Handlebars,
  • two-way data-binding.
  • state management (is a user logged out or logged in),
  • auto-updating templates (when the underlying data changes so does your UI),
  • computed properties (firstName + lastName = fullName).

Ember has only one dependency—jQuery.

Emberjs MVC

Ember has provides some MVC features namley Application, Model, View, and Controller


The Ember.Application is the basis for the entire rest of your code, and provides useful functionality as well as a namespace (a way of grouping the rest of the pieces of your app). Defining an Ember application is simple:

Songs = Ember.Application.create({
    mixmaster: 'Andy'

This defines:

  • an application named Songs
  • a property named mixmaster set to Andy

Note: You can call your application whatever you like, but Ember requires the variable name to begin with a capital letter so that the binding system can find it.

There are additional built-in options, the key ones are:

  • ready() method. This works exactly like jQuery's document.ready() block and can be implemented in the following manner:
Songs = Ember.Application.create({
    mixmaster: 'Andy',
    totalReviews: 0,
    ready: function(){
        alert('Ember sings helloooooooooo!');


Ember data is structured around Models. E.g modelling mp3 data:

Songs.Song = Ember.Object.extend({
    title: null,
    artist: null,
    genre: null,
    listens: 0

Note this

  • Uses the application's namespace. Songs is the name of the application, while Song is the name of the Model.

Models are like Classes:

  • Models use capital letter.
  • The Model definition can have a default values for each property.

Using the Model:

  • you can add your first song by using create to add an instance of it.
mySong = Song.create({
    title: 'Son of the Morning',
    artist: 'Oh, Sleeper',
    genre: 'Screamo'

Note: * the variable doesn't begin with an upper case letter


In general the View is something the user can see and interact with.

  • the view template using inline variables
  • the whole template is surrounded by a script tag for parsing
  • the script tag has a type of text/x-handlebars
<script type="text/x-handlebars">
    Hello <b>{{Songs.mixmaster}}</b>

Any HTML contained within this script tag is automatically prepared by Ember for use in your application. Placing these lines of code within your application will display the following text:

Hello <b>Andy</b>

the raw hthml will also have some handlbar id's embedded

    <script id="metamorph-0-start" type="text/x-placeholder"></script>
    <script id="metamorph-0-end" type="text/x-placeholder"></script>

View Snippets

You can also define a View directly in JavaScript, and then display it to the page by using a view helper.

Ember also has prepackaged with a set of view snippets for building basic controls such as text inputs, check boxes, and select lists.

Songs.ReviewTextArea = Ember.TextArea.extend({
    placeholder: 'Enter your review'

Using the snippet then is prefaced by the word view .

<script type="text/x-handlebars">
    {{view Songs.ReviewTextArea}}

This code displays a TextArea field with placeholder text of “Enter your review”. You can also specify rows and cols as additional properties in your definition.

EmberJs Integrations

  • Ember Table Ember.js + D3, lazy loading supporting a million rows.
emberjs.txt · Last modified: 2013/01/02 01:50 by admin
RSS - 200 © CrosswireDigitialMedia Ltd