Ember.js

Ember.js Focus on your app not on boilerplate code

HISTORY

2007 Charles Jolley SproutCore

2009 1.0 Release

2010 1.4 Release

2010 Yehuda Katz Tom Dale

2011 1.5 Release

1.5 Release 2.0 beta 1.6 Release

1.5 Release 2.0 beta 1.6 Release amber.js ember.js (1.7) 1.8
Release

Ember.js

KEY FEATURES • DATA BINDINGS • COMPUTED PROPERTIES • AUTO-UPDATING
TEMPLATES

DATA BINDINGS

Example = Ember.Application.create(); Example.person = Ember.Object.create({ name: 'John Doe' });
Example.car = Ember.Object.create({ ownerBinding: 'Example.person.name' }); console.log(Example.car.owner); > "John Doe" Example.person.set('name', 'Jane Doe'); console.log(Example.car.owner); > "Jane Doe"

COMPUTED PROPERTIES

Example.person = Ember.Object.create({ firstName: 'John', lastName: 'Doe', name: function() {
return this.get('firstName') + ' ' + this.get('lastName'); // Tell Ember that this computed property depends on // firstName and lastName }.property('firstName', 'lastName') });

Example.person = Ember.Object.create({ firstName: 'John', lastName: 'Doe', name: function(key, value)
{ // getter if (arguments.length === 1) { var firstName = this.get('firstName'); var lastName = this.get('lastName'); return firstName + ' ' + lastName; // setter } else { var name = value.split(' '); this.set('firstName', name[0]); this.set('lastName', name[1]); return value; } }.property('firstName', 'lastName') });

DATA-BOUND DECLARATIVE TEMPLATES

<body> <p> <script type="text/x-handlebars"> The car belongs to {{Example.car.owner}}. </script>
</p> </body>

MVC STRUCTURE

Model Controller View View View Model Model

Call Call Binding Binding 1 2 3 4 5 View
Controller Model

Example.Comment = Ember.Object.extend({ name: null, email: null, text: null });

Example.NewCommentView = Ember.View.extend({ tagName: 'form', commentsBinding: 'Example.commentsController', create: function() {
this.get('comments').createComment( this.getPath('name.value'), this.getPath('email.value'), this.getPath('text.value') ); } });

Example.commentsController = Ember.ArrayController.create({ content: [], createComment: function(name, email, text) {
var comment = Example.Comment.create({ name: name, email: email, text: text }); this.pushObject(comment); } });

STATE MANAGERS

App.stateManager = Ember.StateManager.create({ start: Ember.State.extend({ index: Ember.State.extend({ route "/", setupContext:
function(manager) { manager.transitionTo('posts.index') } }), posts: Ember.State.extend({ route: "/posts", setupContext: function(manager) { // the postsController is shared between the index and // show views, so set it up here var postsController = manager.get('postsController'); postsController.set('content', Post.findAll()); }, // [...]

// [...] index: Ember.State.extend({ route: "/", setupContext: function(manager) { //
the application's main view is a ContainerView whose // view is bound to the manager's `currentView` manager.set('currentView', App.PostsView.create({ controller: postsController })); }, showPost: function(manager, event) { // this event was triggered from an {{action}} inside of // an {{#each}} loop in a template manager.transitionTo('show', event.context); } }), // [...]

// [...] show: Ember.State.extend({ route: "/:post_id", setupContext: function(manager, post) {
var postsController = manager.get('postsController'); postsController.set('selected', post); manager.set('currentView', App.PostView.create({ controller: postController })) }, serialize: function(manager, post) { return { "post_id": post.get('id') } }, deserialize: function(manager, params) { return Post.find(params["post_id"]); } }) // [...]

EMBER-DATA

App.store = DS.Store.create({ revision: 4, adapter: DS.RESTAdapter.create({ namespace: 'api' })
}); App.Person = DS.Model.extend({ firstName: DS.attr('string'), lastName: DS.attr('string'), birthday: DS.attr('date'), fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') });

ATTRIBUTE TYPES • string • number • boolean • date

CUSTOM ATTRIBUTE TYPE DS.attr.transforms.boolString = { from: function(serialized) { if
(serialized === 'Y') { return true; } return false; }, to: function(deserialized) { if (deserialized) { return 'Y'; } return 'N'; } }

ASSOCIATIONS App.Profile = DS.Model.extend({ about: DS.attr('string'), postCount: DS.attr('number') }); App.Author
= DS.Model.extend({ profile: DS.hasOne('App.Profile'), name: DS.attr('string') }); var author = App.store.find(App.Author, 1); author.get('name'); author.get('profile'); author.getPath('profile.postCount');

ASSOCIATIONS • hasOne • belongsTo • hasMany

RETRIEVE • find • findMany • findAll • filter var
oldPeople = App.store.filter(App.Person, function(data) { if (data.age > 80) { return true; } });

CREATE, UPDATE, DELETE • createRecord • deleteRecord var john =
App.store.createRecord(App.Person, { name: 'John Doe' }); App.store.commit(); john.set('name', 'John Wayne'); App.store.commit(); john.deleteRecord(); App.store.commit();

RESOURCES http://emberjs.com http://emberist.com #emberjs on freenode http://stackoverﬂow.com/tags/emberjs

THANKS @galfert github.com/galfert [email protected]

http://5apps.com

Ember.js

Ember.js

Other Decks in Programming

Featured

Transcript