Introduction
Ember.js is a new JavaScript MVC framework, like Backbone or Knockout. This is a very simple, Hello World introduction to Ember.js.
Background
You should be familiar with the concept of MVC frameworks. If you're not, then don't worry, there are STACKS of them available.
Ember.js
Okay, so Ember provides a framework to support MVC. It uses Handlebars.js to provide the view templating, and this is all fully integrated with the library so you don’t need a separate install.
One word of advice – make sure to grab the DEBUG version of the code. This comes crammed with asserts, comments and if you go wrong, then you’ll know why.
So let’s get started.
Create Your HTML
Views use the Handlebars template syntax. These are parsed in runtime by the Ember framework, and churn out HTML. Just like how Active Server Pages work, only all working on the client.
Create your view like so:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
type="text/javascript">
</script>
<script type="text/javascript" src="http://www.codeproject.com/scripts/ember.min.js"></script>
</head>
<body>
<script type="text/x-handlebars">
{{#view App.UserView }}
<b>Name:</b> {{name}}
{{/view}}
</script>
<button onclick="btnTest_OnClick()" id="btnTest">Click me to change</button>
</body>
</html>
The above is your entire HTML page. The view is inserted INLINE in the HTML document, and will appear there. In Ember, you can give views names, and have them appear dynamically, but we’re going to keep things as simple as possible here.
You’ll see that the view has a bit of magic syntax – {{ and }} is handlebars syntax. #view App.UserView refers to the instance of the view object – we haven’t created that yet so don’t worry. {{ name }} is a databound element.
Ember Model, View and Controller
Now we’re ready to create our MVC triad. All of this is done within script tags. Ember requires an application namespace, so the first thing we do is create that.
window.App = Ember.Application.create();
Next we create the model, and an instance, as so:
App.Person = Ember.Object.extend({
id: 0,
name: ""
});
var person = App.Person.create();
person.name = "Duncan";
person.id = 0;
In the above code, we’ve created a Person class, and an instance of that class.
Next, we create the controller:
App.userController = Ember.Object.create({
content: person,
changeModel: function () {
this.content.set('name', 'Joe');
}
});
The convention is that the controller has a field called content, which is a reference to the data it controls (in other words, its model). For the purposes of this example, I’ve added a changeModel function – no convention here – which simply changes the name of the model to Joe.
Note how it changes it – because we have constructed the model as an Ember.Object.extend, then we must use the setter to change the value of the name field.
Now we will create the View class:
App.UserView = Ember.View.extend({
nameBinding: 'App.userController.content.name'
});
We set up the binding here, so that if the controller’s model field ever changes, then this will be automagically updated in the view. Note the naming of this binding is important: it has to tie up with the {{ name }} field we created in the view template – Ember knows this and drops the “Binding” from the end.
Finally, let’s bind to the button declared in the above HTML so that we can do some updating:
function btnTest_OnClick() {
App.userController.changeModel();
}
When the user clicks the button, the controller will update its model. As you’ll see if you run this code, your page will update automatically – despite never having had to tell the HTML to update.
Summary
This is a VERY basic introduction to Ember, but it hopefully gives a 5-minute introduction in order for you to evaluate whether you want to take things further. It’s early days but shows great potential to support really rich applications – with minimal boilerplate code. And you can use as much or as little of the framework as you like – as we’ve seen here. Hope it helps!
The full code is:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="http://www.codeproject.com/scripts/ember.min.js"></script>
</head>
<body>
<script type="text/x-handlebars">
{{#view App.UserView }}
<b>Name:</b> {{name}}
{{/view}}
</script>
<button onclick="btnTest_OnClick()" id="btnTest">Click me to change</button>
<script type="text/javascript">
window.App = Ember.Application.create();
function btnTest_OnClick() {
App.userController.changeModel();
}
$(document).ready(function() {
App.Person = Ember.Object.extend({
id: 0,
name: ""
});
var person = App.Person.create();
person.name = "Duncan";
person.id = 0;
App.userController = Ember.Object.create({
content: person,
changeModel: function () {
this.content.set('name', 'Joe');
}
});
App.UserView = Ember.View.extend({
nameBinding: 'App.userController.content.name'
});
});
</script>
</body>
</html>
History
- 28th June, 2012 - Original revision
