This document provides an overview of Ember objects and their advantages over plain JavaScript objects (POJOs). It describes how Ember objects use getters and setters to synchronize state, and features like computed properties, observers, and bindings that help manage state changes. Computed properties allow defining derived properties, observers define callbacks for property changes, and bindings automatically synchronize linked properties. The document gives examples and best practices for using each feature.
3. POJOS (PLAIN OLE' JAVASCRIPT OBJECTS)
var Hunter = function() {
this.isHappy = false;
this.shootDeer = function() {
var randomNumber = Math.floor(Math.random() * 10);
if (randomNumber % 2 === 0) {
this.isHappy = true;
}
}
};
var jason = new Hunter();
jason.isHappy; // false
jason['isHappy']; // alt way of getting property
jason.shootDeer(); // calling a method
jason.isHappy; // true or false
jason.isHappy = true; // true
4. EMBER OBJECTS
var Hunter = Ember.Object.extend({
isHappy: false,
shootDeer: function() {
var randomNumber = Math.floor(Math.random() * 10);
if (randomNumber % 2 === 0) {
this.set('isHappy', true);
}
}
});
var jason = Hunter.create();
jason.get('isHappy'); // false
jason.shootDeer();
jason.get('isHappy'); // true or false
jason.set('isHappy', true); // true
5. EXAMPLES OF EMBER OBJECTS IN OUR APPS
Show examples from Employer app.
Routes
Controllers
Views
Components
6. WHAT'S SO COOL ABOUT EMBER OBJECTS?
Computed Properties & Macros
Observers
Bindings
7. COMPUTED PROPERTIES
Computed properties let you declare functions as properties.
You create one by defining a computed property as a function,
which Ember will automatically call when you ask for the
property. You can then use it the same way you would any
normal, static property.
It's super handy for taking one or more normal properties and
transforming or manipulating their data to create a new value.
9. COMPUTED PROPERTY REAL WORLD EXAMPLE
// In Controller
App.ApplicationController = Ember.Controller.extend({
isAuthenticated: function() {
return App.AuthManager.isAuthenticated();
}.property('App.AuthManager.apiKey')
});
// In Handlebars Template
<ul>
{{#if isAuthenticated}}
<li><a href="#">Log Out</a></li>
{{else}}
<li><a href="#">Log In</a></li>
{{/if}}
</ul>
10. COMPUTED PROPERTY MACRO EXAMPLE
// Long version
App.ApplicationController = Ember.Controller.extend({
hasMultipleRoles: function() {
return this.get('currentUser.roles.length') > 1;
}.property('currentUser.roles.length')
});
// Macro version
App.ApplicationController = Ember.Controller.extend({
hasMultipleRoles: Ember.computed.gt('currentUser.roles.length', 1);
});
11. OBSERVERS
Ember supports observing any property, including computed
properties. You can set up an observer on an object by using the
observes method on a function.
12. OBSERVER EXAMPLE
var Hunter = Ember.Object.extend({
isHappy: false,
loadedGun: false,
shootDeer: function() {
if (this.get('loadedGun')) {
var randomNumber = Math.floor(Math.random() * 10);
if (randomNumber % 2 === 0) {
this.set('isHappy', true);
}
}
}.observes('loadedGun')
});
var jason = Hunter.create();
jason.set('loadedGun', true);
// shootDeer method will 'fire' when loadedGun property changes
13. BINDINGS
A binding creates a link between two properties such that when
one changes, the other one is updated to the new value
automatically. Bindings can connect properties on the same
object, or across two different objects. Unlike most other
frameworks that include some sort of binding implementation,
bindings in Ember.js can be used with any object, not just
between views and models.
14. BINDING BASIC EXAMPLE
// In Controller
App.SomeController = Ember.Controller.extend({
someProperty: someValue
});
// In Handlebars Template
<p>{{someProperty}}</p>
16. COMPUTED PROPERTIES
Use computed properties to build a new property by
synthesizing other properties. Computed properties should not
contain application behavior, and should generally not cause any
side-effects when called.
17. OBSERVERS
Observers should contain behavior that reacts to changes in
another property. Observers are especially useful when you
need to perform some behavior after a binding has finished
synchronizing.
18. BINDINGS
Bindings 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.
19. REFERENCES
Ember Objects (From Ember Guides)
Ember Objects API
Video: POJOs vs Ember Objects, Ember.get
Computed Property Macros (Evil Trout Article)