1. Building HTML and JavaScript Apps with KnockoutJS and MVVM DEV361

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

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

5. Knockout in 3 Steps Declarative Binding var myViewModel = { firstName: ko.observable("John") }; ko.applyBindings(myViewModel); Create an Observable Bind the ViewModel to the View http://jsfiddle.net/johnpapa/BEzJc/

7. Manual Push via jQuery Guitar model: Sales price: var product = { id: 1001, model: "Taylor 314ce", salePrice: 1199.95 }; $("#guitarModel").val(product.model); $("#guitarSalesPrice").val(product.salePrice); Source object Push from Source to Target

8. demo With and Without Knockout

10. Taylor 110 Taylor 914ce Taylor 110

11. 2 Way Binding Guitar model: Sales price: 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. demo Observables

15. Defining a Computed vm = { id: ko.observable(1), salePrice: ko.observable(4199), qty: ko.observable(2) }; vm.extendedPrice = ko.computed(function () { return this.product() ? this.salePrice() * parseInt("0" + this.qty(), 10) : 0; }, vm); observables owner

16. demo Computed

19. Working with observableArray 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

20. demo ObservableArray

22. Built In Bindings <input type="text" data-bind="enable: allowEditing, value:salePrice" /> <select data-bind="options: colors, value: selectedColor, optionsText: 'name', optionsValue: 'key'" > Built into Knockout Binding for element attributes Multiple binding expressions

23. attrcheckedclickcssdisableenableevent hasfocus htmloptions optionsTextoptionsValue selectedOptionsstylesubmittextuniqueNamevalue visible text value click disable enable attr Display and state bindings Text and value bindings Bindings for specific attributes visible event Event bindings

24. demo Built In Bindings

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

27. Control of Flow with a Template Pass the context for the template with “foreach”...

28. Conditionals 0"> Total value: Any “truthy” expression

29. Changing Context

30. demo Control of Flow and Templates

31. All Part of the Native Template Engine in Knockout All Part of the Native Template Engine in Knockout

32. demo Templates

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

35. Creating a Binding Handler ko.bindingHandlers.fadeVisible = { init: function(element, valueAccessor) { //... }, update: function(element, valueAccessor) { //... } Runs first time the binding is evaluated Runs after init and every time one of its observables changes

36. Common Parameters ko.bindingHandlers.fadeVisible = { init: function(element, valueAccessor, allBindingsAccessor, viewModel) { var shouldDisplay = valueAccessor(); $(element).toggle(shouldDisplay); }, update: function(element, valueAccessor, allBindingsAccessor, viewModel) { var shouldDisplay = valueAccessor(); shouldDisplay ? $(element).fadeIn() : $(element).fadeOut(); } Bound DOM element What is passed to the binding All other bindings on same element The viewmodel

37. demo Custom Binding Handlers

39. JavaScript: The Developer Experience (DEV308) Find Me Later At… @john_papa JavaScript: The Language (DEV307)

40. Visual Studio Home Page :: http://www.microsoft.com/visualstudio/en-ushttp://www.microsoft.com/visualstudio/en-us Jason Zander’s Blog :: http://blogs.msdn.com/b/jasonz/http://blogs.msdn.com/b/jasonz/ Facebook :: http://www.facebook.com/visualstudiohttp://www.facebook.com/visualstudio Twitter :: http://twitter.com/#!/visualstudiohttp://twitter.com/#!/visualstudio Somasegar’s Blog :: http://blogs.msdn.com/b/somasegar/http://blogs.msdn.com/b/somasegar/

41. Connect. Share. Discuss. http://northamerica.msteched.com Learning Microsoft Certification & Training Resources www.microsoft.com/learning TechNet Resources for IT Professionals http://microsoft.com/technet Resources for Developers http://microsoft.com/msdn

42. Required Slide Complete an evaluation on CommNet and enter to win!

43. Scan the Tag to evaluate this session now on myTechEd Mobile