Ember ATX: Components

Transcript

1. Components

2. Tim G. Thomas @timgthomas timgthomas.com

3. Components

4. {{ember-atx}}

5. Controller + View (+ Template) Route-less

6. Why?

7. Using Components

8. {{ember-atx}}

9. /* ember-atx.hbs */ <h1>‚</h1> /* elsewhere... */ {{ember-atx}}

10. /* ember-atx.hbs */ <h1>‚</h1> /* In 1.13... */ <ember-atx>

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

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

    });

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

14. export default Ember.Component.extend({ itemCount: function() { // No, wait...I'm a

    Controller! }.property() });

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

16. {{ember-atx items=model}}

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

    });

18. <ember-atx foo={{action 'attend'}}> foo: 'bar', actions: { somethingHappened() { this.attrs.foo.call({});

    } }

19. <ember-atx attend={{action 'attend'}}>

20. <p>{{yield}}</p> {{#ember-atx}} I'm a lumberjack and I'm okay... {{/ember-atx}}

21. {{component 'component-name'}}

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

23. Thanks! @timgthomas