Slide 1

Slide 1 text

Hi!

Slide 2

Slide 2 text

@timgthomas

Slide 3

Slide 3 text

Scenario

Slide 4

Slide 4 text

// 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') });

Slide 5

Slide 5 text

”Data Down, Actions Up“

Slide 6

Slide 6 text

Ember.Evented

Slide 7

Slide 7 text

// 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); } });

Slide 8

Slide 8 text

// 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', () => {}); } });

Slide 9

Slide 9 text

Route Hierarchy Gotcha!

Slide 10

Slide 10 text

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');

Slide 11

Slide 11 text

bit.ly/ember-evented

Slide 12

Slide 12 text

Thanks!