KnockoutJS TechEd NA 2012

Transcript

2. With and Without Knockout
3. UI Patterns Data & Bindings Separation of Concerns Structured JavaScript
4. 6+ 2+ Separates behavior and structure Declarative bindings Observables
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/
6. Source object Push from Source to Target
8. With and Without Knockout Observable
9. Taylor 110 Taylor 914ce Taylor 914ce Taylor 110
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
12. With and Without Knockout Observable Computed
13. computed dependentObservable
14. ko.computed this this.qty vm observables owner
16. With and Without Knockout Observable Computed ObservableArray
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 } ]) }; <span data-bind="text: products().length"></span> Pre-populating Operating on observableArray
20. With and Without Knockout Observable Computed ObservableArray Built In Bindings
21. enable value options value optionsText optionsValue Built into Knockout Binding for element attributes Multiple binding expressions
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
24. With and Without Knockout Observable Computed ObservableArray Built In Bindings Templates
25. • If truthy condition if • If falsy condition ifnot • Execute for each item in a list foreach • Shortcut to execute for the object with
26. template: {name: 'productsTmpl', foreach: lines} Pass the context for the template with “foreach” productsTmpl
27. if: lines().length > 0 Any “truthy” expression
28. with: model text: brand text: name <div> <div data-bind="text: model().brand"></div> <div data-bind="text: model().name"></div> </div>
30. All Part of the Native Template Engine in Knockout
32. With and Without Knockout Observable Computed ObservableArray Built In Bindings Templates Custom Binding Handlers
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
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
37. With and Without Knockout Observable Computed ObservableArray Built In Bindings Templates
38. JavaScript: The Developer Experience (DEV308) JavaScript: The Language (DEV307)
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/
40. http://northamerica.msteched.com www.microsoft.com/learning http://microsoft.com/technet http://microsoft.com/msdn