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

Living in a Component World

Chris Ball
February 21, 2016

Living in a Component World

You have probably heard by now that Components are the way forward in Ember. Component all the things! Routeable Components haven't landed yet, and in the meantime you want to make sure you're building things the right way.

This talk will focus on using Components as the major building blocks in your application. We'll discuss Data Down/Actions Up, how to handle parent/child components, yielding, closure actions, and helpers using some test-driven examples to guide the way.

Chris Ball

February 21, 2016

More Decks by Chris Ball

Other Decks in Programming


  1. Living in a Component World cball_ {{user-list}} {{profile-navigator}} {{gravatar-image}} {{signup-form}}

    {{comment-form as |form|}} {{#toggle-button}} hi {{else}} bye {{/toggle-button}} {{happy-user}} Component!
  2. cball_ this.set('someProperty', true); .. change route ... when you come

    back its still true! 2 - Store state as a singleton
  3. cball_ 1 - Decorate models for templates 2 - Store

    state as a singleton Components Services
  4. cball_ {{#car-list cars=cars as |car|}} Amazing {{car.name}} {{else}} Show when

    I have no cars. {{/car-list}} yield to inverse {{#each cars as |car|}} {{yield car}} {{/else}} {{yield to="inverse"}} {{/each}}
  5. cball_ {{!-- some-route/template.hbs --}} {{#custom-table as |table row|}} {{custom-column table=table

    name='foo'}} {{row.someProperty}} {{/custom-column}} {{/custom-table}} Parent/Child {{!-- custom-table/template.hbs --}} {{#each content as |row| {{yield this row}} {{/each}}
  6. cball_ Contextual Components {{!-- custom-table/template.hbs --}} {{#each content as |row|

    {{yield (hash row=(component 'crazy-row' table=this row=row)}} {{/each}} {{!-- some-route/template.hbs --}} {{#custom-table as |table|}} {{#table.row as |row|}} {{!-- something with row.someProperty --}} {{/table}} {{/custom-table}}
  7. cball_ Easy nested actions {{!-- some-route/template.hbs --}} {{my-component on-update-thing=(action 'doUpdate'

    thing)}} {{!-- parent-component/template.hbs --}} {{child-component on-update-thing=on-update-thing}} {{!-- child-component/template.hbs --}} <button {{action on-update-thing}}>Go!</button>
  8. cball_ They can also return values! {{!-- thing/template.hbs --}} {{my-component

    on-update-thing=(route-action 'doUpdate')}} {{!-- thing/route.js --}} export default Ember.Route.extend({ actions: { doUpdate(thing) { return thing.save().then(() => doStuff()); } } });
  9. cball_ One use looks a bit strange. {{!-- my-component/template.hbs --}}

    <button {{action (action 'doStuff')}}Go!</button>
  10. cball_ Dynamic Components {{!-- profile/template.hbs --}} <div class="profile"> {{component (concat

    userType '-profile')}} </div> {{!-- profile/template.hbs --}} <div class="profile"> {{component userProfileComponent}} </div>