Ember Views

For the NYC SC/Ember meetup.

Transcript

1. Ember Views June 2012 Ray Cohen Developer @ Boxee
2. from
3. Basics
4. Basics
5. Same as
6. Basics • A template is a function that builds a string • Handlebars compiles strings to templates • templateName is a key into Ember.TEMPLATES
7. Binding values to DOM
8. Binding values to DOM
9. {{bound}} and {{unbound}}
10. Escaped by default
11. Binding element properties Need another way FAIL
12. {{bindAttr}} helper
13. Helpers • Functions invoked by {{fn-name params}} • Invoked during view render • Output a string to the buffer • Can set up property observers
14. The {{#if}} helper `#` before helper name: takes a block
15. How {{#if}} works • Create metamorph view • Observe App.loggedIn • On change, switch template Blocks become templates
16. The {{view}} helper
17. The {{#view}} helper
18. The {{#view}} helper Behind the scenes
19. Ember.ContainerView • Templates can’t always describe all UI • Sometimes more flexibility is required • ContainerView holds other view instances, allows code to add, remove, reorder • set currentView property • or manage childViews array
20. Something is missing
22. context keywords so far we’ve been dodging this topic with globals like App.team
23. Old way: view is context TL;DR
24. view keyword 0.9 1.0 beta
25. Setting context: {{#with}}
26. Setting context: {{#each}}
27. Setting context: {{view}} When?
28. Controllers 1.0 beta
29. Setting context: {{view}} If available, use controller as context otherwise, use existing context.
30. Result • Controller is context for a chunk of DOM • Controller is good place to have properties that many views access • Reduces need to bind lots of values to the views themselves • Moving things around in templates is easier
31. Setting keywords
32. Setting keywords
33. Creating helpers • Main issue is having bindings work within your helper’s output • Easiest path: call one of the other helpers from your helper after some setup • Future: easier ability to bind some types of helpers (see PR 615)
34. Example: {{outlet}}
35. Example: {{outlet}}
36. Event Delegation & Lifecycle hooks
37. Event Delegation
38. Event Delegation rootElement.delegate(...)
39. didInsert and willDestroy jQuery!
40. Mixins are _super()
41. Example Mixin
42. Example Mixin
43. Infinite Scroll don’t forget to call _super()
44. Resources • emberjs.com/guides/ • emberist.com/ - Peter Wagenet’s blog • IRC - #emberjs on Freenode • bring your jsfiddle!
45. Thanks! @raycohen