The dive into Handlebars and Ember.js

Leave a reply

It is time! Time to talk Handlebars and how to use them in Ember.js or how Ember uses Handlebars.

If you want to follow along, get a copy of the Ember Starter Kit.

Open up the app.js and add the following code right before the App.Router.

App.personController = Ember.ArrayController.create({
  content: [{name: 'Adam'}, {name: 'James'}]
});

(we are creating (create();) an instance of a class, therefor we use a lower case – personController, while when extending (extend();) a class we use a capital letter)

Here we are creating a controller naming it personController, and setting its content to some static content.

In your index.html put the following right after the body.

<script type="text/x-handlebars">
  {{#each App.personController}}
    <p>{{name}}</p>
  {{/each}}
</script>

The ‘each’ loops through the content in the personController and outputs each name. The ‘#’ means start of the handlebar view and ‘/’ is the end point.

Run the app and it should output:

Adam
James

The Bonus part

To enhance the app somewhat we add a model. Right before the personController add:

App.Person = Em.Object.extend({
  name: null	
});

This adds a new model, class (whatever you want to call it). Setting a name and setting it to null is not necessary but it can help to remember what properties the model exists of(f)(?) <- (hey I'm swedish).

Add this to your personController:

init: function() {
  this._super();
  var person = App.Person.create({
   name: ‘Linda’
  });
  this.pushObject(person);	
}

this._super(); calls the parent class (super is a reserved to JavaScript hence the underscore _ ) and you need to do this inside the init so the init method will be called all the way up the prototype chain. (source Cerebris)

Then we create a instance (person) of the class Person and set its name property to 'Linda' and finally push (add) this to the content array.

Running the app should yield the following result:

Adam
James
Linda

Get the source files.

Unsolved issue

Doing a console.log() last in init reveals the following:

Screen Shot 2012-12-19 at 22.08.41

The first two are objects but the last one is 'c', the one we created from a class, stand s for class?

Diggin’ deeper into Ember.js

Leave a reply

I guess with Ember 1.0.0-PRE.2 the smallest application is.

App = Ember.Application.create();

App.ApplicationView = Ember.View.extend({
  templateName: 'application'
});
App.ApplicationController = Ember.Controller.extend();

App.Router = Ember.Router.extend({
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/'
    })
  })
});

App.initialize();

An Ember-app MUST have the ApplicationView and the ApplicationController. It must be named exactly like that and without it the root view could not render any content.

The Router

The router is keeping track of your app’s state. The router must have two routes. The first must be named root and the second (index) is where Ember looks at the init, must have ‘/’ as path.

Next we are going to check out a more hands on example. Building a small app with some Ember outlets and look at how the template system (Handlebars) is working.

A bonus video

This guy is a lot smarter than me, check out the video

The Ember MVC

2 Replies

Model, View, Controller. That spells M V C.

The model is where the data is kept. It’s the blueprint. For example: Model describes a Person. A Person has a name and an age. In Ember.js we create a model like this.

App.Person = Ember.Object.extend({
  name: null,
  age: null
});

The view is the visual layer. It’s what you see and interact with. A form, a bullet list etc. To define a view type:

App.PersonView = Ember.View.extend();

And last but not least the controller. The controller is the bridge between the model and the view. When someone, for example, clicks a button the controller gets input from the view and preforms actions on the model (CRUD).

App.PersonController = Ember.Controller.extend();

In the controller the information about your (in this case) Person(s) will be stored.

And that wraps it up for this time.

Hello Ember.js (world), goodbye sanity!?

1 Reply

Every Ember.js app needs to have:

window.App = Ember.Application.create();

where App is the name of your application. You could call it Whatever, but it should probably have a name that relates to the app you’re building. It has to start with a capital letter tho, in order for bindings (huh?, more on this later) to find it.

Then to start your app add:

App.initialize();

Congrats! You have created your first Ember-app. Totally useless, but hey hang on!

A bonus part

Like jQuery, Ember.js has a ready-function that fires when the DOM is ready. Add this to your Ember.Application.create();

ready: function(){
  alert("Hello Ember.js (world), goodbye sanity!?");
}

Now our finished application looks lite this:

window.App = Ember.Application.create({
  ready: function(){
    alert("Hello Ember.js (world), goodbye sanity!?");
  }
});
App.initialize();