EMBER.JSRaphaël Rougeron / @goldoraf

MAIS QU'EST-CE ?ember.js est un framework MVC pour le développement

de Single Page Apps, né des cendres de Sproutcore...

Version stable : 0.9.8.1

Dernière version : 1.0.0-pre2

QUI L'UTILISE ?

MODÈLE OBJETApp.Todo = Ember.Object.extend({ title: null, completed: false,

complete: function() { this.set('completed', true); }});

var todo = App.Todo.create({ title: 'Acheter du pain'});console.log(todo.get('title'));todo.set('completed', true);

HÉRITAGEApp.Task = App.Todo.extend({ dueAt: null, completedAt: null,

complete: function() { this._super(); this.set('completedAt', new Date()); }});

RÉOUVERTURE D'INSTANCES

RÉOUVERTURE DE "CLASSES"

App.Task.reopen({ assignee: null});

App.Task.reopenClass({ instantiate: function() { return this.create(); }});

COMPUTED PROPERTIESApp.Contact = Ember.Object.extend({ firstname: null, lastname: null, email: null,

fullname: function() { return this.get('firstname') + ' ' + this.get('lastname'); }.property('firstname', 'lastname')});

COMPUTED PROPERTIESGETTERS / SETTERS

App.Contact.reopen({ fullname: function(key, value) { // getter if (arguments.length === 1) { return this.get('firstname') + ' ' + this.get('lastname'); // setter } else { var name = value.split(" "); this.set('firstName', name[0]); this.set('lastName', name[1]); } }.property('firstname', 'lastname')});

BINDINGSApp.Contact = Ember.Object.extend({ firstname: null, lastname: null, email: null,

addressbookBinding: 'App.PersonalAddressbook.name'});

var c = App.Contact.create({ firstname: 'John', lastname: 'Doe'});console.log(c.get('addressbook')); // -> 'My contacts'

OBSERVERSApp.Todo = Ember.Object.extend({ title: null, completed: false,

todoChanged: function() { App.store.save(this); }.observes('title', 'completed')});

OBSERVERSSYNTAXES ALTERNATIVES

App.Todo = Ember.Object.extend({ title: null, completed: false, todoChanged: Ember.observer(function() { App.store.save(this); }, 'title', 'completed')});

var todo = App.Todo.create();todo.addObserver('title', 'completed', function() { App.store.save(this);});

OBSERVERS SUR LES ARRAYSApp.TodoList = Ember.Object.extend({ todos: [],

completed: function() { return this.get('todos').filterProperty('completed', true); }.property('todos.@each.completed')});

ENUMERABLESvar todos = [ App.Todo.create({ title: 'Acheter le pain' }), App.Todo.create({ title: 'Finir mes slides' }), App.Todo.create({ title: 'Jouer de la guitare' })];

todos.forEach(function(item, index, self) { item.set('completed', true);});

todos.invoke('complete');

ENUMERABLES #2var titles = todos.map(function(item) { return item.get('title');});

var titles = todos.mapProperty('title');

var completed = todos.filter(function(item) { return item.get('completed') === true;});

var completed = todos.filterProperty('completed', true);

ENUMERABLES #3var allCompleted = todos.every(function(item) { return item.get('completed') === true;});

var allCompleted = todos.everyProperty('completed', true);

var someCompleted = todos.some(function(item) { return item.get('completed') === true;});

var someCompleted = todos.someProperty('completed', true);

HANDLEBARS <span class="title">{{task.title}}</span> <a href="#" class="assignee">{{task.assignee.name}}</a> {{#if task.dueAt}} Due at {{format_date task.dueAt}} {{/if}}

VIEWS ET TEMPLATES<script type="text/x-handlebars" data-template-name="hi"> Hi, {{name}}</script>

var view = Ember.View.create({ templateName: 'hi', name: 'Bob'});

view.appendTo('#container');

TEMPLATES ET BINDINGSHi, {{name}}

Hi,<script id="metamorph-0-start" type="text/x-placeholder"></script>Bob<script id="metamorph-1-start" type="text/x-placeholder"></script>

Hi, {{unbound name}}

Hi, Bob

HELPERS HANDLEBARS{{bindAttr}}

App.NoticeView = Ember.View.create({ specificCSSClass: 'uber-notice-ui', isError: true});

<div {{bindAttr class="specificCSSClass isError"}}> Lorem ipsum</div>

=> <div class="uber-notice-ui is-error">Lorem ipsum</div>

HELPERS HANDLEBARS{{bindAttr}}

<div {{bindAttr class="isError:error:info"}}> Lorem ipsum</div>

<div {{bindAttr class="isError::error"}}> Lorem ipsum</div>

HELPERS HANDLEBARS{{view}}

App.ContactView = Ember.View.extend({ templateName: 'contact', contact: App.Contact.create({ firstname: 'John', lastname: 'Doe', email: 'jdoe@zz.com' })});

App.ContactInfoView = Ember.View.extend({ templateName: 'info'});

<script type="text/x-handlebars" data-template-name="contact"> Name: {{contact.firstname}} {{contact.lastname}} {{view App.ContactInfoView contactBinding="contact"}}</script>

<script type="text/x-handlebars" data-template-name="info"> Email: {{contact.email}}</script>

HELPERS HANDLEBARS{{view}}

<script type="text/x-handlebars" data-template-name="contact"> Name: {{contact.firstname}} {{contact.lastname}} {{#view App.ContactInfoView contactBinding="contact"}} Email: {{contact.email}} {{/view}}</script>

HELPERS HANDLEBARS{{action}}

App.TodoView = Ember.View.extend({ templateName: 'todo-view', todo: null, isEditing: false,

edit: function(event) { this.set('isEditing', true); }});

{{view Ember.Checkbox checkedBinding="todo.completed"}}{{#if isEditing}} {{view Ember.TextField valueBinding="todo.title"}}{{else}} <span {{action "edit" on="click" target="parentView"}}>{{todo.title}}</span>{{/if}}

LE MVC DANS EMBER

CONTROLLERSApp.todosController = Ember.ArrayController.extend({ remaining: function() { return this.filterProperty('completed', false).get('length'); }.property('@each.completed')});

$.get('todos.json', function(data) { App.todosController.set('content', data);});

{{#each App.todosController as todo}} {{view App.TodoView todoBinding="todo"}}{{/each}}Remaining: {{App.todosController.remaining}}

MODELSEMBER-DATA

App.Todo = DS.Model.extend({ title: DS.attr('string'), completed: DS.attr('boolean'), owner: DS.belongsTo('App.User')});

App.User = DS.Model.extend({ fullname: DS.attr('string'), todos: DS.hasMany('App.Todo')});

App.store = DS.Store.create({ adapter: DS.RESTAdapter.create()});

var todos = App.store.findAll(App.Todo);// -> GET /todos

ROUTERwindow.App = Ember.Application.create({ ApplicationView = Ember.View.extend({ templateName: 'application' }), ApplicationController = Ember.Controller.extend({ title: 'Todo list' }), Router: Ember.Router.extend({ root: Ember.Route.extend({ index: Ember.Route.extend({ route: '/' }) }) })});

<script type="text/x-handlebars" data-template-name="application"> <h1>{{title}}</h1></script>

ROUTER ET OUTLETSwindow.App = Ember.Application.create({ ... store = DS.Store.create(), Router: Ember.Router.extend({ root: Ember.Route.extend({ index: Ember.Route.extend({ route: '/', connectOutlets: function(router, context) { router.get('applicationController').connectOutlet('todos', store.findAll(App.Todo)); } }) }) })});

<script type="text/x-handlebars" data-template-name="application"> <h1>{{title}}</h1> <div id="content">{{outlet}}</div></script>

ROUTER #2window.App = Ember.Application.create({ ... Router: Ember.Router.extend({ root: Ember.Route.extend({ index: Ember.Route.extend({ route: '/', ... }), completed: Ember.Route.extend({ route: '/completed', connectOutlets: function(router, context) { router.get('applicationController').connectOutlet('todos', store.filter(App.Todo, function(todo) { return item.get('completed') === true; }) ); } }) }) })});

ROUTER ET TRANSITIONSwindow.App = Ember.Application.create({ ... Router: Ember.Router.extend({ root: Ember.Route.extend({ gotoCompleted: Ember.Route.transitionTo('root.completed'), index: Ember.Route.extend({ route: '/', ... }), completed: Ember.Route.extend({ route: '/completed', ... }) }) })});

<script type="text/x-handlebars" data-template-name="application"> <h1>{{title}}</h1> <a {{action gotoCompleted}}>View completed</a> <div id="content">{{outlet}}</div></script>

CONCLUSION