Ember ATX: Ember.Evented

Lightning talk about one of my favorite Ember mixins, Ember.Evented!

Transcript

1. Hi!
   

   View Slide

2. @timgthomas
   

   View Slide

3. Scenario
   

   View Slide

4. // models/item.js
   export default Ember.Object.extend({
   actions: {
   save() { this.set('savedAt', new Date()); }
   }
   });
   // components/show-item.js
   export default Ember.Component.extend({
   itemSaved: function() {
   // ...
   }.observes('item.savedAt')
   });
   

   View Slide

5. ”Data Down, Actions Up“
   

   View Slide

6. Ember.Evented
   

   View Slide

7. // models/item.js
   export default Ember.Object.extend(Ember.Evented, {
   actions: {
   save() { this.trigger('saved'); }
   }
   });
   // components/show-item.js
   export default Ember.Component.extend({
   init() {
   this._super();
   this.get('item').on('saved', this.itemSaved);
   }
   });
   

   View Slide

8. // controllers/list.js
   export default Ember.Controller.extend(Ember.Evented, {
   actions: {
   save() { this.trigger('saved'); }
   }
   });
   // controllers/item.js
   export default Ember.Controller.extend({
   init() {
   this._super();
   this.get('controllers.list').on('saved', () => {});
   }
   });
   

   View Slide

9. Route Hierarchy
   Gotcha!
   

   View Slide

10. let controller = this.get('controllers.foo');
    controller.trigger('foo');
    controller.trigger('foo', 'bar');
    controller.on('foo', () => {});
    controller.off('foo', () => {});
    controller.one('foo', () => {});
    controller.has('foo');
    

    View Slide

11. bit.ly/ember-evented
    

    View Slide

12. Thanks!
    

    View Slide