Tweet
Tweet

Slide 1

Slide 1 text

Components

Slide 2

Slide 2 text

Tim G. Thomas @timgthomas timgthomas.com

Slide 3

Slide 3 text

Components

Slide 4

Slide 4 text

{{ember-atx}}

Slide 5

Slide 5 text

Controller + View (+ Template) Route-less

Slide 6

Slide 6 text

Why?

Slide 7

Slide 7 text

Using Components

Slide 8

Slide 8 text

{{ember-atx}}

Slide 9

Slide 9 text

/* ember-atx.hbs */

‚

/* elsewhere... */ {{ember-atx}}

Slide 10

Slide 10 text

/* ember-atx.hbs */

‚

/* In 1.13... */

Slide 11

Slide 11 text

export default Ember.Component.extend({ });

Slide 12

Slide 12 text

export default Ember.Component.extend({ didInsertElement() { // I'm a view! } });

Slide 13

Slide 13 text

export default Ember.Component.extend({ didInsertElement() { this.$().fadeOut(); } });

Slide 14

Slide 14 text

export default Ember.Component.extend({ itemCount: function() { // No, wait...I'm a Controller! }.property() });

Slide 15

Slide 15 text

export default Ember.Component.extend({ itemCount: function() { return this.get('items'); }.property('items') });

Slide 16

Slide 16 text

{{ember-atx items=model}}

Slide 17

Slide 17 text

export default Ember.Component.extend({ items: function() { return Ember.$ .getJSON('/dont/tell/anyone'); }.property() });

Slide 18

Slide 18 text

foo: 'bar', actions: { somethingHappened() { this.attrs.foo.call({}); } }

Slide 19

Slide 19 text

Slide 20

Slide 20 text

{{yield}}

{{#ember-atx}} I'm a lumberjack and I'm okay... {{/ember-atx}}

Slide 21

Slide 21 text

{{component 'component-name'}}

Slide 22

Slide 22 text

guides.emberjs.com ember-components.com timgthomas.com Don't go here!

Slide 23

Slide 23 text

Thanks! @timgthomas