KnockoutJS and MVVM with JavaScript - TechED 2013

Do you write a lot of HTML and JavaScript code to push and pull data? In this session, learn popular techniques to use data binding to bind your data to your target controls in HTML writing less code, but gaining more power. See how to consume JSON data, use JSON objects in JavaScript, use declarative binding, using KnockoutJS. Also, see how to use the MVVM pattern to write data-centric Javascript code that follows good separation patterns and creates highly maintainable code.

Transcript

2. Knockout Data Binding
3. 6+ 2+ Separates behavior and structure Declarative bindings Observables
5. <input data-bind="value: code" placeholder="Code"/> Declarative Binding var myViewModel = { code: ko.observable('DEV338') }; ko.applyBindings(myViewModel); Create an Observable Bind the ViewModel to the View
6. var title = ko.observable(); <div data-bind="with: session"> <label for="title">Title</label> <input id="title" data-bind="value: title"/> </div>
8. <section data-bind=" "> <article> <div> <img data-bind=" " /> <address data-bind=" "></address> <address data-bind=" "></address> </div> </article> </section>
9. <div> <label for="title">Title</label> <input id="title" data-bind="value: session().title"/> </div> <div> <label>Track</label> <select data-bind="options: tracks, optionsText: 'name', value: session().track"> </select> </div>
10. name('Kat'); Use Parentheses to Unwrap
11. var 'Haley' Read Values Using Parentheses 'Ella' 'Ella' Set Values Using Parentheses Function definition Good! Redefined name to be a string, not an observable Good!
12. Unwrapping observable function in code Dive into objects with declarative binding sessions().length speaker().imagePath
13. <section> <div data-bind="text: people().length"></div> <article data-bind="foreach: people"> <address data-bind="text:name"></address> <address data-bind="text:age"></address> <address data-bind="text:address().city"></address> </article> </section>
14. When You Need a Value That Doesn’t Exist in the Web Service
15. 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
16. var hasChanges = ko.computed(function() { return datacontext.hasChanges(); }); var canSave = ko.computed(function() { return hasChanges() && !isSaving(); });
17. Tracks which objects are in the array
18. var vm = { 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
19. Declarative Bindings in HTML
20. <input type="text" data-bind="enable: allowEdit, value: price" /> <select data-bind="options: colors, value: selectedColor, optionsText: 'name', optionsValue: 'key'" ></select> Built into Knockout Binding for Element Attributes Multiple Binding Expressions
21. attr checked click css disable enable event hasfocus html options optionsText optionsValue selectedOptions style submit text uniqueName value visible
22. attr checked click css disable enable event hasfocus html options optionsText optionsValue selectedOptions style submit text uniqueName value visible
23. attr checked click css disable enable event hasfocus html options optionsText optionsValue selectedOptions style submit text uniqueName value visible
24. attr checked click css disable enable event hasfocus html options optionsText optionsValue selectedOptions style submit text uniqueName value visible
25. <p data-bind="if: lines().length > 0"> Total value: <span data-bind="text: my.formatCurrency(grandTotal())"></span> </p> Any truthy expression
26. <section data-bind="foreach: sessions"> <article> <img data-bind="attr: { src: speaker().imageName }" class="img-polaroid"/> <span data-bind="text: timeSlot().name"></span> <span data-bind="text: room().name"></span> <small data-bind="text: level" class="right"></small> <small data-bind="text: track().name" class="right"></small> <small data-bind="text: code" class="right"></small> <h1 data-bind="text: title"></h1> <address data-bind="text: speaker().fullName"></address> <small data-bind="text: tagsFormatted"></small> </article> </section> For every session, render this article
27. Custom Bindings
28. Just Another Binding
29. ko.bindingHandlers.fadeVisible = { init: function (element, valueAccessor) { }, update: function (element, valueAccessor, allBindingsAccessor) { } }; Runs first time the binding is evaluated Runs after init and every time one of its observables changes
30. ko.bindingHandlers.fadeVisible = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { var shouldDisplay = valueAccessor(); $(element).toggle(shouldDisplay); }, update: function (element, valueAccessor, allBindingsAccessor, viewModel) { var shouldDisplay = valueAccessor(), allBindings = allBindingsAccessor(); shouldDisplay ? $(element).fadeIn() : $(element).fadeOut(); } }; Bound DOM element 1 Value passed to the binding 2 All bindings on same element 3 The viewmodel 4
31. Use Breakpoints
34. See more at http://www.fotolia.com/johnpapa