SlideShare a Scribd company logo
1 of 19
Download to read offline
EMBER OBJECTS 
A 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; // false 
jason['isHappy']; // alt way of getting property 
jason.shootDeer(); // calling a method 
jason.isHappy; // true or false 
jason.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'); // false 
jason.shootDeer(); 
jason.get('isHappy'); // true or false 
jason.set('isHappy', true); // true
EXAMPLES OF EMBER OBJECTS IN OUR APPS 
Show examples from Employer app. 
Routes 
Controllers 
Views 
Components
WHAT'S SO COOL ABOUT EMBER OBJECTS? 
Computed Properties & Macros 
Observers 
Bindings
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.
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 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>
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); 
});
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.
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
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.
BINDING BASIC EXAMPLE 
// In Controller 
App.SomeController = Ember.Controller.extend({ 
someProperty: someValue 
}); 
// In Handlebars Template 
<p>{{someProperty}}</p>
COMPUTED PROPERTIES, OBSERVERS AND 
BINDINGS, OH MY! 
WHAT TO USE WHEN?
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.
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.
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.
REFERENCES 
Ember Objects (From Ember Guides) 
Ember Objects API 
Video: POJOs vs Ember Objects, Ember.get 
Computed Property Macros (Evil Trout Article)

More Related Content

What's hot

Moving ActiveRecord objects to the boundaries of your domain
Moving ActiveRecord objects to the boundaries of your domainMoving ActiveRecord objects to the boundaries of your domain
Moving ActiveRecord objects to the boundaries of your domainPatrick Dougall
 
Functional Core, Reactive Shell
Functional Core, Reactive ShellFunctional Core, Reactive Shell
Functional Core, Reactive ShellGiovanni Lodi
 
Cocoa heads testing and viewcontrollers
Cocoa heads testing and viewcontrollersCocoa heads testing and viewcontrollers
Cocoa heads testing and viewcontrollersStijn Willems
 

What's hot (6)

Moving ActiveRecord objects to the boundaries of your domain
Moving ActiveRecord objects to the boundaries of your domainMoving ActiveRecord objects to the boundaries of your domain
Moving ActiveRecord objects to the boundaries of your domain
 
Ext J S Observable
Ext J S ObservableExt J S Observable
Ext J S Observable
 
Angular Data
Angular DataAngular Data
Angular Data
 
Functional Core, Reactive Shell
Functional Core, Reactive ShellFunctional Core, Reactive Shell
Functional Core, Reactive Shell
 
Ext Js Events
Ext Js EventsExt Js Events
Ext Js Events
 
Cocoa heads testing and viewcontrollers
Cocoa heads testing and viewcontrollersCocoa heads testing and viewcontrollers
Cocoa heads testing and viewcontrollers
 

Viewers also liked

Have you got a problem2
Have you got a problem2Have you got a problem2
Have you got a problem2Isni Dhanianto
 
ESTANCIA ACADÉMICA 2011-2012
ESTANCIA ACADÉMICA 2011-2012ESTANCIA ACADÉMICA 2011-2012
ESTANCIA ACADÉMICA 2011-2012ColegioArenas
 
Michael Caulfield: Developing a Connected Health Economy
Michael Caulfield: Developing a Connected Health EconomyMichael Caulfield: Developing a Connected Health Economy
Michael Caulfield: Developing a Connected Health Economy3GDR
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsLinkedIn
 

Viewers also liked (6)

Have you got a problem2
Have you got a problem2Have you got a problem2
Have you got a problem2
 
Glc telc pilot
Glc  telc pilotGlc  telc pilot
Glc telc pilot
 
ESTANCIA ACADÉMICA 2011-2012
ESTANCIA ACADÉMICA 2011-2012ESTANCIA ACADÉMICA 2011-2012
ESTANCIA ACADÉMICA 2011-2012
 
Sb pictures.final
Sb pictures.finalSb pictures.final
Sb pictures.final
 
Michael Caulfield: Developing a Connected Health Economy
Michael Caulfield: Developing a Connected Health EconomyMichael Caulfield: Developing a Connected Health Economy
Michael Caulfield: Developing a Connected Health Economy
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
 

Similar to The basics of Ember Objects

Ian 20150116 java script oop
Ian 20150116 java script oopIan 20150116 java script oop
Ian 20150116 java script oopLearningTech
 
Java script+mvc+with+emberjs
Java script+mvc+with+emberjsJava script+mvc+with+emberjs
Java script+mvc+with+emberjsji guang
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScriptJulie Iskander
 
Java script object model
Java script object modelJava script object model
Java script object modelJames Hsieh
 
Defining method in JavaScript object.pptx
Defining method in JavaScript object.pptxDefining method in JavaScript object.pptx
Defining method in JavaScript object.pptxSteins18
 
Object-Oriented Javascript
Object-Oriented JavascriptObject-Oriented Javascript
Object-Oriented Javascriptkvangork
 
Object-Oriented JavaScript
Object-Oriented JavaScriptObject-Oriented JavaScript
Object-Oriented JavaScriptkvangork
 
Understanding Functions and "this" in the World of ES2017+
Understanding Functions and "this" in the World of ES2017+Understanding Functions and "this" in the World of ES2017+
Understanding Functions and "this" in the World of ES2017+Bryan Hughes
 
Improving android experience for both users and developers
Improving android experience for both users and developersImproving android experience for both users and developers
Improving android experience for both users and developersPavel Lahoda
 
Droidcon2013 android experience lahoda
Droidcon2013 android experience lahodaDroidcon2013 android experience lahoda
Droidcon2013 android experience lahodaDroidcon Berlin
 
Reliable Javascript
Reliable Javascript Reliable Javascript
Reliable Javascript Glenn Stovall
 
Javascript And J Query
Javascript And J QueryJavascript And J Query
Javascript And J Queryitsarsalan
 
Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications  Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications Juliana Lucena
 
Web Optimization Summit: Coding for Performance
Web Optimization Summit: Coding for PerformanceWeb Optimization Summit: Coding for Performance
Web Optimization Summit: Coding for Performancejohndaviddalton
 
Understanding JavaScript
Understanding JavaScriptUnderstanding JavaScript
Understanding JavaScriptnodejsbcn
 

Similar to The basics of Ember Objects (20)

Ian 20150116 java script oop
Ian 20150116 java script oopIan 20150116 java script oop
Ian 20150116 java script oop
 
Java script+mvc+with+emberjs
Java script+mvc+with+emberjsJava script+mvc+with+emberjs
Java script+mvc+with+emberjs
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScript
 
Java script object model
Java script object modelJava script object model
Java script object model
 
Defining method in JavaScript object.pptx
Defining method in JavaScript object.pptxDefining method in JavaScript object.pptx
Defining method in JavaScript object.pptx
 
Object-Oriented Javascript
Object-Oriented JavascriptObject-Oriented Javascript
Object-Oriented Javascript
 
Object-Oriented JavaScript
Object-Oriented JavaScriptObject-Oriented JavaScript
Object-Oriented JavaScript
 
Understanding Functions and "this" in the World of ES2017+
Understanding Functions and "this" in the World of ES2017+Understanding Functions and "this" in the World of ES2017+
Understanding Functions and "this" in the World of ES2017+
 
Improving android experience for both users and developers
Improving android experience for both users and developersImproving android experience for both users and developers
Improving android experience for both users and developers
 
Droidcon2013 android experience lahoda
Droidcon2013 android experience lahodaDroidcon2013 android experience lahoda
Droidcon2013 android experience lahoda
 
Everyday's JS
Everyday's JSEveryday's JS
Everyday's JS
 
Enterprise js pratices
Enterprise js praticesEnterprise js pratices
Enterprise js pratices
 
Say It With Javascript
Say It With JavascriptSay It With Javascript
Say It With Javascript
 
Reliable Javascript
Reliable Javascript Reliable Javascript
Reliable Javascript
 
Js objects
Js objectsJs objects
Js objects
 
Javascript And J Query
Javascript And J QueryJavascript And J Query
Javascript And J Query
 
Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications  Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications
 
Web Optimization Summit: Coding for Performance
Web Optimization Summit: Coding for PerformanceWeb Optimization Summit: Coding for Performance
Web Optimization Summit: Coding for Performance
 
DrupalCon jQuery
DrupalCon jQueryDrupalCon jQuery
DrupalCon jQuery
 
Understanding JavaScript
Understanding JavaScriptUnderstanding JavaScript
Understanding JavaScript
 

Recently uploaded

DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 

Recently uploaded (20)

DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 

The basics of Ember Objects

  • 1. EMBER OBJECTS A guide to Ember Objects and their awesomeness.
  • 2. POJOS VS. EMBER OBJECTS
  • 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.
  • 8. 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"
  • 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>
  • 15. COMPUTED PROPERTIES, OBSERVERS AND BINDINGS, OH MY! WHAT TO USE WHEN?
  • 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)