Contextual Components

Contextual components presentation from Boston Ember.js.

Video at https://youtu.be/Au3rHHuEZNI?t=1h6m42s

Transcript

1. Contextual Components Eric Kelly
2. Thanks Tom
3. Form For
4. Important Stuff • {{yield}} • Using component block parameters • {{hash}} helper • {{component}} helper • closure actions & dot syntax
5. Yielding Component <div class="ui-panel"> <div class="ui-panel__content"> </div> </div> {{! app/templates/components/ui-panel.hbs}} {{ui-panel}} Panel Content {{yield}} {{#ui-panel}} Panel Content {{#ui-panel}}
6. Yielding Values let post = { title: 'Contextual Components', body: 'Sometimes you want contextual components.', author: 'Tim' } {!-- app/templates/components/blog-post.hbs}} <div class="blog-post"> {{yield post.title post.body post.author}} </div> {{#blog-post post=post as |title body author|}} <h2>{{title}}</h2> <p class="blog-post__author">by {{author}}</p> <p class="blog-post__body">{{body}}</p> {{/blog-post}}
7. Blog Post Preview // app/components/blog-post.js export default Ember.Component.extend({ preview: Ember.computed('post.body', function() { return this.get('post.body').substring(0, 18); }) }); {!-- app/templates/components/blog-post.hbs}} <div class="blog-post"> {{yield post.title post.body post.author preview}} </div> {{#blog-post post=post as |title body author preview|}} <h2>{{title}}</h2> <p class="blog-post__author">by {{author}}</p> <p class=“blog-post__preview”>{{preview}}…</p> {{/blog-post}}
8. {{hash}} Helper {{#blog-post post=(hash title="Some Title" body="Post body" author="Eric") as |title body author| }} <h2>{{title}}</h2> <p class="blog-post__author">by {{author}}</p> <p class="blog-post__body">{{body}}</p> {{/blog-post}}
9. {{hash}} Helper {{! app/templates/components/blog-post.hbs}} <div class="blog-post"> {{yield (hash title=post.title body= post.body author=post.author preview=preview ) }} </div> {{#blog-post post=post as |p|}} <h2>{{p.title}}</h2> <p class="blog-post__author">by {{p.author}}</p> <p class="blog-post__preview">{{p.preview}}...</p> {{/blog-post}}
10. Component Helper
11. Component Helper
12. Dynamic Component helper <!-- Output --> <div>Hey, Eric, how's it going?</div>
13. Closure Components
14. Contextual Components
15. Form For
16. Resources • https://github.com/offirgolan/ember-light-table • http://www.serabe.com/2016/03/04/the-path-to- contextual-components-contextual-components/ • https://github.com/martndemus/ember-form-for
17. @HeroicEric