$30 off During Our Annual Pro Sale. View Details »

Ember ATX: Ember.Evented

Ember ATX: Ember.Evented

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

timgthomas

July 24, 2015
Tweet

More Decks by timgthomas

Other Decks in Technology

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