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

Ember Views

Ember Views

For the NYC SC/Ember meetup.

Raymond Cohen

June 11, 2012

Other Decks in Programming


  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

  21. None
  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