$30 off During Our Annual Pro Sale. View Details »

Ember Views

Ember Views

For the NYC SC/Ember meetup.

Raymond Cohen

June 11, 2012
Tweet

Other Decks in Programming

Transcript

  1. Ember Views
    June 2012
    Ray Cohen
    Developer @ Boxee

    View Slide

  2. from

    View Slide

  3. Basics

    View Slide

  4. Basics

    View Slide

  5. Same as

    View Slide

  6. Basics
    • A template is a function that builds a string
    • Handlebars compiles strings to templates
    • templateName is a key into Ember.TEMPLATES

    View Slide

  7. Binding values to DOM

    View Slide

  8. Binding values to DOM

    View Slide

  9. {{bound}} and {{unbound}}

    View Slide

  10. Escaped by default

    View Slide

  11. Binding element properties
    Need another way
    FAIL

    View Slide

  12. {{bindAttr}} helper

    View Slide

  13. Helpers
    • Functions invoked by {{fn-name params}}
    • Invoked during view render
    • Output a string to the buffer
    • Can set up property observers

    View Slide

  14. The {{#if}} helper
    `#` before helper name: takes a block

    View Slide

  15. How {{#if}} works
    • Create metamorph view
    • Observe App.loggedIn
    • On change, switch template
    Blocks become templates

    View Slide

  16. The {{view}} helper

    View Slide

  17. The {{#view}} helper

    View Slide

  18. The {{#view}} helper
    Behind the scenes

    View Slide

  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

    View Slide

  20. Something is missing

    View Slide

  21. View Slide

  22. context
    keywords
    so far we’ve been
    dodging this topic with
    globals like App.team

    View Slide

  23. Old way: view is context
    TL;DR

    View Slide

  24. view keyword
    0.9
    1.0 beta

    View Slide

  25. Setting context: {{#with}}

    View Slide

  26. Setting context: {{#each}}

    View Slide

  27. Setting context: {{view}}
    When?

    View Slide

  28. Controllers
    1.0 beta

    View Slide

  29. Setting context: {{view}}
    If available, use controller as context
    otherwise, use existing context.

    View Slide

  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

    View Slide

  31. Setting keywords

    View Slide

  32. Setting keywords

    View Slide

  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)

    View Slide

  34. Example: {{outlet}}

    View Slide

  35. Example: {{outlet}}

    View Slide

  36. Event Delegation
    &
    Lifecycle hooks

    View Slide

  37. Event Delegation

    View Slide

  38. Event Delegation
    rootElement.delegate(...)

    View Slide

  39. didInsert and willDestroy
    jQuery!

    View Slide

  40. Mixins are
    _super()

    View Slide

  41. Example Mixin

    View Slide

  42. Example Mixin

    View Slide

  43. Infinite Scroll
    don’t forget to call _super()

    View Slide

  44. Resources
    • emberjs.com/guides/
    • emberist.com/ - Peter Wagenet’s blog
    • IRC - #emberjs on Freenode
    • bring your jsfiddle!

    View Slide

  45. Thanks!
    @raycohen

    View Slide