EMBER OBJECTSA guide to Ember Objects and their awesomeness.

POJOS VS. EMBER OBJECTS

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; // falsejason['isHappy']; // alt way of getting propertyjason.shootDeer(); // calling a methodjason.isHappy; // true or falsejason.isHappy = true; // true

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'); // falsejason.shootDeer();jason.get('isHappy'); // true or falsejason.set('isHappy', true); // true

EXAMPLES OF EMBER OBJECTS IN OUR APPSShow examples from Employer app.

RoutesControllersViewsComponents

WHAT'S SO COOL ABOUT EMBER OBJECTS?Computed Properties & Macros

Observers

Bindings

COMPUTED PROPERTIESComputed 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 theproperty. 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 andtransforming or manipulating their data to create a new value.

COMPUTED PROPERTY BASIC EXAMPLE App.Person = Ember.Object.extend({ firstName: null, lastName: null, fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName')});

var jason = App.Person.create({ firstName: "Jason", lastName: "Schmidt"});

jason.get('fullName'); // "Jason Schmidt"

COMPUTED PROPERTY REAL WORLD EXAMPLE // In ControllerApp.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>

COMPUTED PROPERTY MACRO EXAMPLE // Long versionApp.ApplicationController = Ember.Controller.extend({ hasMultipleRoles: function() { return this.get('currentUser.roles.length') > 1; }.property('currentUser.roles.length')});

// Macro versionApp.ApplicationController = Ember.Controller.extend({ hasMultipleRoles: Ember.computed.gt('currentUser.roles.length', 1);});

OBSERVERSEmber supports observing any property, including computed

properties. You can set up an observer on an object by using theobserves method on a function.

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

BINDINGSA binding creates a link between two properties such that when

one changes, the other one is updated to the new valueautomatically. Bindings can connect properties on the same

object, or across two different objects. Unlike most otherframeworks that include some sort of binding implementation,

bindings in Ember.js can be used with any object, not justbetween views and models.

BINDING BASIC EXAMPLE // In ControllerApp.SomeController = Ember.Controller.extend({ someProperty: someValue});

// In Handlebars Template<p>{{someProperty}}</p>

COMPUTED PROPERTIES, OBSERVERS ANDBINDINGS, OH MY!

WHAT TO USE WHEN?

COMPUTED PROPERTIESUse computed properties to build a new property by

synthesizing other properties. Computed properties should notcontain application behavior, and should generally not cause any

side-effects when called.

OBSERVERSObservers should contain behavior that reacts to changes inanother property. Observers are especially useful when youneed to perform some behavior after a binding has finished

synchronizing.

BINDINGSBindings are most often used to ensure objects in two differentlayers are always in sync. For example, you bind your views to

your controller using Handlebars.

REFERENCESEmber Objects (From Ember Guides)Ember Objects APIVideo: POJOs vs Ember Objects, Ember.getComputed Property Macros (Evil Trout Article)