Ember Views

For the NYC SC/Ember meetup.

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