Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ember ATX: Components

Ember ATX: Components

An introduction to Ember's Components

Af7acd01448753af3dfd648c3f5ea287?s=128

timgthomas

May 29, 2015
Tweet

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