Ember ATX: Components

An introduction to Ember's Components

Transcript

1. Components
   

   View Slide

2. Tim G. Thomas
   @timgthomas
   timgthomas.com
   

   View Slide

3. Components
   

   View Slide

4. {{ember-atx}}
   

   View Slide

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

   View Slide

6. Why?
   

   View Slide

7. Using Components
   

   View Slide

8. {{ember-atx}}
   

   View Slide

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

   View Slide

10. /* ember-atx.hbs */
    ‚
    /* In 1.13... */
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. 
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. Thanks!
    @timgthomas
    

    View Slide