Thursday, July 18, 13
Intro To
Jay Phelpshttps://github.com/jayphelps
July 18, 2013
1.0.0-rc.6
Thursday, July 18, 13
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
CORE CONCEPTS
• Classes
• Computed Properties
• Bindings
• Templates
• MVC
Thursday, July 18, 13
EMBER.OBJECT
• Base “class” that almost every object should inherit from
• Contains magic
Thursday, July 18, 13
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
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
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
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
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
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
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
OBSERVERS
• Should contain behavior that reacts a property’s value changes
Thursday, July 18, 13
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
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
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
TEMPLATES
• Uses Handlebars + Ember helpers
• Ember adds partial, render, view, and control helpers
Thursday, July 18, 13
APPLICATION TEMPLATE
<body><script type="text/x-handlebars"> <div> {{outlet}} </div></script></body>
Thursday, July 18, 13
MVC...KINDA
• Routes -> Models -> Controllers -> Views -> Templates
Thursday, July 18, 13
AN EMBER APP
var App = Ember.Application.create();
App.Foo = Ember.Object.extend({ });
Thursday, July 18, 13
DEFINE YOUR ROUTES
App.Router.map(function () { // route ‘index’ is auto-assumed this.route('about'); this.route('contact');});
Thursday, July 18, 13
APPLICATION TEMPLATE
<body><script type="text/x-handlebars"> <h1>My Great Web App</h1> <div> {{outlet}} </div></script><script type="text/x-handlebars" data-template-name="index"> <h1>{{welcomeMessage}}</h1> <ul> {{#each names}} <li>{{this}}</li> {{/each}} </ul> {{#linkTo about}}Navigate to `about` page{{/linkTo}}</script><script type="text/x-handlebars" data-template-name="about"> <p>The current time is: {{time}}</p> {{#linkTo index}}Navigate to `index` (home) page{{/linkTo}}</script>
Thursday, July 18, 13
DEFINE YOUR ROUTES
App.IndexRoute = Ember.Route.extend({ setupController: function (controller) { controller.set('welcomeMessage', 'Welcome!'); }});
App.AboutRoute = Ember.Route.extend({ setupController: function (controller) { setInterval(function () { controller.set('time', new Date()); }, 1000); }});
Thursday, July 18, 13
MODELS
• ember-data
• ember-model
• BYO$A (bring your own $.ajax);
Thursday, July 18, 13
CONTROLLERS
App.IndexController = Ember.ObjectController.extend({ welcomeMessage: '', names: ['Bilbo', 'Frodo', 'Sam']});
Thursday, July 18, 13
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
DEMO
Thursday, July 18, 13
THAT’S ALL FOLKS.
Thursday, July 18, 13
Recommended