SlideShare una empresa de Scribd logo
1 de 19
Descargar para leer sin conexión
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)

Más contenido relacionado

La actualidad más candente

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
 

La actualidad más candente (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
 

Destacado

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
 

Destacado (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 a 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 a 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
 

Último

Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 

Último (20)

Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 

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)