Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ember ATX: Ember.Evented

Ember ATX: Ember.Evented

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

Af7acd01448753af3dfd648c3f5ea287?s=128

timgthomas

July 24, 2015
Tweet

Transcript

  1. Hi!

  2. @timgthomas

  3. Scenario

  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') });
  5. ”Data Down, Actions Up“

  6. Ember.Evented

  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); } });
  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', () => {}); } });
  9. Route Hierarchy Gotcha!

  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');
  11. bit.ly/ember-evented

  12. Thanks!