This document discusses JavaScript MVC frameworks and provides an overview of Ember.js. It explains the basic concepts of MVC including models, views, and controllers. It then demonstrates how to create models, views, and controllers in Ember.js. Additional Ember.js features like computed properties, bindings, and event handling are described. Finally, resources for learning more about Ember.js are provided.

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 ！