3. WHAT EMBER IS
• MVC client side JavaScript framework
• Open source
• Convention over configuration (less boiler plate,
steeper learning curve for some)
Thursday, July 18, 13
5. EMBER.OBJECT
• Base “class” that almost every object should inherit
from
• Contains magic
Thursday, July 18, 13
6. CLASSES
var Person = Ember.Object.extend({
say: function (message) {
alert(message);
}
});
var bob = Person.create();
bob.say('hello world');
// alerts "hello world"
Thursday, July 18, 13
7. var Man = Person.extend({
say: function (message) {
message += ', says the man.';
this._super(message);
}
});
var dudebro = Man.create();
dudebro.say('hello world');
// alerts "hello world, says the man."
Thursday, July 18, 13
8. EMBER.OBJECT
• Obj.create() instead of new for instances
• Obj.extend() for single inheritance (mixins exist as
well)
• this._super() calls overridden implementation
• Obj.reopen() to edit class definition
• Obj.reopenClass() to modify static members
Thursday, July 18, 13
9. GETTER/SETTER
• obj.get(‘key’) and obj.set(‘key’, value);
• Always used on instances that inherit Ember.Object
• Allows dynamically created property values
• Objects can listen for property changes
• Use .setProperties({ key: value }) for multiple at a
time
Thursday, July 18, 13
10. GETTER/SETTER
var Person = Ember.Object.extend({
name: '',
sayMyName: function () {
alert(this.get('name'));
}
});
var dudebro = Person.create();
dudebro.set('name', 'Tomster');
dudebro.sayMyName();
// alerts "Tomster"
Thursday, July 18, 13
11. COMPUTED PROPERTIES
• Used to build a property that depends on other
properties.
• Function prototype .property() helper
• Provide any property keys you access and the
property value will recomputed if they change
• Should not contain application behavior, and should
generally not cause any side-effects when called.
Thursday, July 18, 13
12. COMPUTED PROPERTIES
var Person = Ember.Object.extend({
firstName: '',
lastName: '',
fullName: function () {
return this.get('firstName') + ' ' + this.get('lastName');
}.property('firstName', 'lastName')
});
var person = Person.create({
firstName: 'Bilbo',
lastName: 'Baggins',
});
person.get('fullName');
// "Bilbo Baggins"
Thursday, July 18, 13
14. OBSERVERS
var Person = Ember.Object.extend({
firstName: '',
lastName: '',
fullName: function () {
return this.get('firstName') + ' ' + this.get('lastName');
}.property('firstName', 'lastName'),
fullNameDidChange: function () {
alert('changed!');
}.observes('fullName')
});
var person = Person.create({
firstName: 'Bilbo',
lastName: 'Baggins',
});
person.set('firstName', 'Frodo');
// alerts “changed!”
Thursday, July 18, 13
15. BINDINGS
• Properties that automatically listen and update their
own value to match a target property or vice versa
• Are most often used to ensure objects in two
different layers are always in sync. For example, you
bind your views to your controller using Handlebars.
Thursday, July 18, 13
16. BINDINGS
App.wife = Ember.Object.create({
householdIncome: 80000
});
App.husband = Ember.Object.create({
// Notice the `Binding` suffix, which triggers the binding
householdIncomeBinding: 'App.wife.householdIncome'
});
App.husband.get('householdIncome');
// 80000
// Someone gets raise.
App.husband.set('householdIncome', 90000);
App.wife.get('householdIncome');
// 90000
Thursday, July 18, 13
17. TEMPLATES
• Uses Handlebars + Ember helpers
• Ember adds partial, render, view, and control helpers
Thursday, July 18, 13
26. VIEWS
App.AboutView = Ember.View.extend({
// template name is optional for views
// that are rendered from a route
templateName: 'about',
// events bubble up to each parent view until it reaches
// the root view
click: function (event) {
alert('about view clicked!');
}
});
Thursday, July 18, 13