Intro to Ember.js

Intro To
Jay Phelps
https://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)

CORE CONCEPTS
• Classes
• Computed Properties
• Bindings
• Templates
• MVC

EMBER.OBJECT
• Base “class” that almost every object should inherit
from
• Contains magic

CLASSES
var Person = Ember.Object.extend({
say: function (message) {
alert(message);
}
});
var bob = Person.create();
bob.say('hello world');
// alerts "hello world"

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."

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

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

GETTER/SETTER
name: '',
sayMyName: function () {
alert(this.get('name'));
}
});
var dudebro = Person.create();
dudebro.set('name', 'Tomster');
dudebro.sayMyName();
// alerts "Tomster"

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.

COMPUTED PROPERTIES
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"

OBSERVERS
• Should contain behavior that reacts a property’s value
changes

OBSERVERS
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!”

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.

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

TEMPLATES
• Uses Handlebars + Ember helpers
• Ember adds partial, render, view, and control helpers

APPLICATION TEMPLATE
<body>
<script type="text/x-handlebars">
<div>
{{outlet}}
</div>
</script>
</body>

MVC...KINDA
• Routes -> Models -> Controllers -> Views -> Templates

AN EMBER APP
var App = Ember.Application.create();
App.Foo = Ember.Object.extend({ });

DEFINE YOUR ROUTES
App.Router.map(function () {
// route ‘index’ is auto-assumed
this.route('about');
this.route('contact');
});

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>

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);
}
});

MODELS
• ember-data
• ember-model
• BYO$A (bring your own $.ajax);

CONTROLLERS
App.IndexController = Ember.ObjectController.extend({
welcomeMessage: '',
names: ['Bilbo', 'Frodo', 'Sam']
});

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!');
}
});

THAT’S ALL FOLKS.

Intro to Ember.js

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Intro to Ember.js

Similar a Intro to Ember.js (20)

Más de Jay Phelps

Más de Jay Phelps (12)

Último

Último (20)

Intro to Ember.js