$30 off During Our Annual Pro Sale. View Details »

Ember ATX: Components

Ember ATX: Components

An introduction to Ember's Components

timgthomas

May 29, 2015
Tweet

More Decks by timgthomas

Other Decks in Programming

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