Ember ATX: Components

An introduction to Ember's 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