Ember Views

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

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