KnockoutJS TechEd NA 2012

Transcript

1. View Slide

2. With and Without Knockout
   

   View Slide

3. UI Patterns
   Data &
   Bindings
   Separation
   of Concerns
   Structured
   JavaScript
   

   View Slide

4. 6+ 2+
   Separates behavior and structure
   Declarative bindings
   Observables
   

   View Slide

5. data-bind="value: firstName"
   Declarative
   Binding
   ko.observable
   ko.applyBindings
   Create an
   Observable
   Bind the ViewModel
   to the View
   http://jsfiddle.net/johnpapa/BEzJc/
   

   View Slide

6. Source object
   Push from Source to Target
   

   View Slide

7. View Slide

8. With and Without Knockout
   Observable
   

   View Slide

9. Taylor 110
   Taylor 914ce
   Taylor 914ce
   Taylor 110
   

   View Slide

10. data-bind
    Declarative
    Binding
    product: {
    id: 1001,
    model: ko.observable("Taylor 314ce"),
    salePrice: ko.observable(1199.95)
    }
    ko.applyBindings(data);
    Source object
    Bind Source to Target, & Vice Versa
    

    View Slide

11. View Slide

12. With and Without Knockout
    Observable
    Computed
    

    View Slide

13. computed dependentObservable
    

    View Slide

14. ko.computed
    this this.qty
    vm
    observables
    owner
    

    View Slide

15. View Slide

16. With and Without Knockout
    Observable
    Computed
    ObservableArray
    

    View Slide

17. View Slide

18. var myViewModel = {
    salesPerson: ko.observable("John"),
    empNum: ko.observable(39811),
    products: ko.observableArray([
    { model: "Taylor 314CE", price: 1749, id=321 },
    { model: "Martin D40", price: 1899, id=479 }
    ])
    };
    
    Pre-populating
    Operating on
    observableArray
    

    View Slide

19. View Slide

20. With and Without Knockout
    Observable
    Computed
    ObservableArray
    Built In Bindings
    

    View Slide

21. enable value
    options
    value
    optionsText
    optionsValue
    Built into Knockout
    Binding for element
    attributes
    Multiple binding
    expressions
    

    View Slide

22. attr checked click css disable
    enable event hasfocus html options
    optionsText optionsValue selectedOptions style submit
    text uniqueName value visible
    text value
    click disable
    enable
    attr
    Display and state bindings
    Text and value bindings
    Bindings for specific attributes
    visible
    event
    Event bindings
    

    View Slide

23. View Slide

24. With and Without Knockout
    Observable
    Computed
    ObservableArray
    Built In Bindings
    Templates
    

    View Slide

25. • If truthy condition
    if
    • If falsy condition
    ifnot
    • Execute for each item in a list
    foreach
    • Shortcut to execute for the object
    with
    

    View Slide

26. template: {name: 'productsTmpl', foreach: lines}
    Pass the context for the template with “foreach”
    productsTmpl
    

    View Slide

27. if: lines().length > 0
    Any “truthy” expression
    

    View Slide

28. with: model
    text: brand
    text: name
    
    
    
    
    

    View Slide

29. View Slide

30. All Part of the
    Native Template Engine
    in Knockout
    

    View Slide

31. View Slide

32. With and Without Knockout
    Observable
    Computed
    ObservableArray
    Built In Bindings
    Templates
    Custom Binding Handlers
    

    View Slide

33. View Slide

34. function(element, valueAccessor
    function(element, valueAccessor
    Runs first time the binding is
    evaluated
    Runs after init and every
    time one of its observables
    changes
    

    View Slide

35. element, valueAccessor, allBindingsAccessor, viewModel
    valueAccessor
    element
    element, valueAccessor, allBindingsAccessor, viewModel
    valueAccessor
    element element
    Bound DOM
    element
    What is passed
    to the binding
    All other bindings
    on same element
    The
    viewmodel
    

    View Slide

36. View Slide

37. With and Without Knockout
    Observable
    Computed
    ObservableArray
    Built In Bindings
    Templates
    

    View Slide

38. JavaScript: The Developer Experience (DEV308)
    JavaScript: The Language (DEV307)
    

    View Slide

39. http://www.microsoft.com/visualstudio/en-us
    http://blogs.msdn.com/b/jasonz/
    http://www.facebook.com/visualstudio
    http://twitter.com/#!/visualstudio
    Somasegar’s Blog http://blogs.msdn.com/b/somasegar/
    

    View Slide

40. http://northamerica.msteched.com www.microsoft.com/learning
    http://microsoft.com/technet http://microsoft.com/msdn
    

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide