Learning Ember.js This blog post was published on November 11 2012. §
Ember Hello World.
Today’s post will show you how to create a minimal viable Ember application. What better place to start than to get Hello World showing to the screen. We will build the application up line by line, discussing what Ember does behind the scenes.
While doubling as a brief intro to Ember this will help me make sure I understand what is going on by describing what happens to you.
Once we have a minimal viable application we will slowly expand upon it in future posts to show off the fancy features of Ember.
To get started I highly recommend you following along by opening up this Fiddle and typing the code in as we go. Be sure to open up the developer tools for your browser (I use Chrome) so you can debug issues, and see console output. Also open up the Ember API doc’s to read about certain parts of the API as we touch them. Here is the end result so you can verify you have the same.
Every application you build with Ember requires you to create an Ember.Application. As the doc’s say this defines a namespace for you to place all your code so you don’t pollute the global namespace. If you set a breakpoint down in your application (debugger; in javascript) and take a look at all there variables under Global; there are quite a few of them.
You can call your app whatever you please-this example calls it MyApp-and it we can create the application like so:
MyApp = Ember.Application.create();
By itself this doesn’t do very much and it is pretty useless without a view and a controller so let’s make those next.
To do this we will extend (essentially inherit) default implementations for an Ember.View and Ember.Controller into our own properties on our Ember Application. These will be used as templates by Ember to create instances of them.
MyApp = Ember.Application.create({
ApplicationView: Ember.View.extend({})
});
Here we are passing in a javascript object, {}, with ApplicationView as one of its properties. This property extends the functionality of an Ember.View. Ember takes this object and makes a mixin. This code get’s ‘mixed into’ the application you create. Essentially this just adds ApplicationView as a property to your App.
Ember also requires you to have a Controller that matches your views. Controllers act as the context for the view supplying it with data. Let’s create the matching application controller next.
MyApp = Ember.Application.create({
ApplicationView: Ember.View.extend({}),
ApplicationController: Ember.Controller.extend({})
});
It is very important to note the naming of our view and controller templates:
ApplicationView
ApplicationController
Ember expects you to have these properties on your application named in the exact same way. Ember then recognizes these internally and instantiates them for you adding them as properties on your app called applicationView and applicationController.
Let’s get something displaying to the screen! All your view’s should be associated with a handlebars template. This template will then be used to render whatever data that is on the controller that is attached to the view (remember the controller acts as a context for the view). Place this code in the HTML quadrant of your JSFiddle:
<script type="text/x-handlebars" data-template-name="test">
</script>
This declares a handlebars script with the name ‘test’, which can be named whatever you please. This will be used to identify the handelbars template in the view. To do this add the templateName property to your view like so:
ApplicationView: Ember.View.extend({
templateName: 'test'})
The next step is to add a default Ember.Router which will be used to manage state, and control what happens when the user navigates to various URL’s in your application. Add the following code after your controller:
Router: Ember.Router.extend({
root: Ember.Route.extend({
})
})
This declares an Ember.Router, which Ember will automatically instantiate and start routing for you. Inside this router you can add any number of different routes via Ember.Route. These routes can be thought of as different states of your application with different URL’s associated with them.
Not declaring the root Route nested in your Ember.Router will cause Ember to assert with the following message:
Uncaught Error: assertion failed: Could not find state for path: "root"
Finally, let’s get something displaying to the screen. Add the following code inside your handlebars template:
<h1>{{name}}</h1>
When Ember goes to initialize your application it will create an instance of your ApplicationView and append it to the body of the DOM. It will compile the handlebars template and display it into the screen. Right now if you run the Fiddle nothing will show up because Ember doesn’t know how to resolve (for the lack of a better word) the {{name}} we have to declared in handlebars. To remedy this let’s add a name property to your controller like so:
name: 'Hello World!'
Now you should see ‘Hello World!’ on the screen. Your applicationView uses the applicationController as a context and will look for anything declared in your handlebars template on the controller by name.
To summarize the code presented in this post covers the minimal amount of work required to get something showing up on the screen. Here is what we did:
- Created an Ember.Application to house all of our data.
- Applications are made up of views and matching controllers. Every application should have a ApplicationView and ApplicationController.
- The ApplicationController provides the data to your view.
- Ember behind the scenes did the following instantiated the view, controller, and router all for us. It linked the view and the controller together so the view knew where to get data from.
In the future I plan to build up this small application into something more functional to help show off the features of Ember.