1. JAVASCRIPT MVC WITH
EMBER.JS
@LASERJI 2012-06-12

2. WHAT IS MVC ?
Model + View + Controller

3. MODEL
var Person = {
name: “”,
say: function(thing){
alert(“fuck this “ + thing + “!”);
}
};
var person = new Person();

4. VIEW
We call {{somebody}} as BIG HOLE !!!
{{#if person}}
Welcome back <b>{{name}}</b> !
{{/if}}

5. CONTROLLER
(function($, exports){
var mod = {};
mod.doSomething = function(){
// do something
};
mod.load = function(){
this.view = $(“#view”);
};
})(jQuery, window);

6. JAVASCRIPT MVC LIBRARIES
• Backbone.js
• Ember.js (SproutCore 2.0)
• Spine.js
• JavaScriptMVC
• Sammy.js
• YUILibrary
• KnockoutJS
• Angular.js
• Fidel.js
• ExtJS
• http://www.infoq.com/cn/news/2012/05/js-mvc-
framework

7. EMBER.JS
• Ember is a JavaScript framework for creating
ambitious web applications that eliminates
boilerplate and provides a standard application
architecture.
• Formerly known as AmberJS – formerly known as
SprouteCore 2
• Emberjs.com
• Ember.js VS. Backbone.js

8. CREATING A NAMESPACE
window.App = Ember.Application.create();
window.App = Ember.Application.create({
rootElement: '#sidebar'
});
// namespace & event handler

9. THE EMBER OBJECT MODEL
Person = Ember.Object.extend({
say: function(thing) {
alert(thing);
}
});
var person = Person.create();
person.say("Hello") // alerts "Hello"

10. THE EMBER OBJECT MODEL
// Passing in an object
var tom = Person.create({
name: "Tom Dale",
helloWorld: function() {
this.say("Hi my name is " + this.get('name'));
}
});
tom.helloWorld() // alerts "Hi my name is Tom Dale"

11. THE EMBER OBJECT MODEL
// Reopening Classes and Instances
Person.reopen({
isPerson: true
});
Person.create().get('isPerson') // true
Person.reopen({
// override `say` to add an ! at the end
say: function(thing) {
this._super(thing + "!");
}
});

12. COMPUTED PROPERTIES
Person = Ember.Object.extend({
// these will be supplied by `create`
firstName: null,
lastName: null,
fullName: function() {
var firstName = this.get('firstName');
var lastName = this.get('lastName');
return firstName + ' ' + lastName;
}.property('firstName', 'lastName')
});
var tom = Person.create({
firstName: "Tom",
lastName: "Dale"
});
tom.get('fullName') // "Tom Dale"

13. BINDINGS
App.president = Em.Object.create({
name: "Obama”
});
App.country = Em.Object.create({
presidentNameBinding: 'App.president.name'
});
App.country.get('presidentName’); // “Obama"

14. EVENT HANDELER
App.ListingView = Ember.View.extend({
templateName: 'edit',
edit: function(event) {
alert('Edited')
}
});

15. EVENT HANDELER
App.ClickableView = Ember.View.extend({
click: function(evt) {
alert("ClickableView was clicked!");
}
});

16. OTHER RESOURCES
• http://www.adobe.com/devnet/html5/articles/flam
e-on-a-beginners-guide-to-emberjs.html
• http://emberjs.com/documentation/
• http://www.andymatthews.net/read/2012/03/07/G
etting-Started-With-EmberJS
• http://ngauthier.com/2012/02/playing-with-
ember.html
• http://emberjs.tumblr.com/

17. THANK YOU ！