Whirlwind Tour of … Building HTML5 and JavaScript Apps with MVVM and Knockout.js

Do you write a lot of HTML and Javascript code to push and pull data? In this session you will 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 declaritive binding, using KnockoutJS. You will 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

1. @JOHN_PAPA @JOHN_PAPA
2. @JOHN_PAPA       
3. @JOHN_PAPA
4. @JOHN_PAPA
5. @JOHN_PAPA 6+ 2+
6. @JOHN_PAPA <input data-bind="value: firstName" /> var myViewModel = { firstName: ko.observable("John") }; ko.applyBindings(myViewModel); http://jsfiddle.net/johnpapa/BEzJc/
7. @JOHN_PAPA       
8. @JOHN_PAPA         
9. @JOHN_PAPA <span>Guitar model:</span><input id="guitarModel" /> <span>Sales price:</span><input id="guitarSalesPrice" /> var product = { id: 1001, model: "Taylor 314ce", salePrice: 1199.95 }; $("#guitarModel").val(product.model); $("#guitarSalesPrice").val(product.salePrice);
10. @JOHN_PAPA
11. @JOHN_PAPA       
12. @JOHN_PAPA    
13. @JOHN_PAPA <span>Guitar model:</span> <input data-bind="value: product.model"/> <span>Sales price:</span> <span data-bind="text: product.salePrice"></span> product: { id: ko.observable(1001), model: ko.observable("Taylor 314ce"), salePrice: ko.observable(1199.95) } ko.applyBindings(data);
14. @JOHN_PAPA
15. @JOHN_PAPA       
16. @JOHN_PAPA      
17. @JOHN_PAPA vm = { id: ko.observable(1), sa lePrice: ko.observable(4199), qty: ko.observable(2) }; vm.extendedPrice = ko.computed(function () { return this.product() ? this.salePrice() * parseInt("0" + this.qty(), 10) : 0; }, vm);
18. @JOHN_PAPA
19. @JOHN_PAPA       
20. @JOHN_PAPA      
21. @JOHN_PAPA 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>
22. @JOHN_PAPA
23. @JOHN_PAPA       
24. @JOHN_PAPA <input type="text" data-bind="enable: allowEditing, value:salePrice" /> <select data-bind="options: colors, value: selectedColor, optionsText: 'name', optionsValue: 'key'" ></select>   
25. @JOHN_PAPA
26. @JOHN_PAPA
27. @JOHN_PAPA       
28. @JOHN_PAPA
29. @JOHN_PAPA <tbody data-bind="template: {name: 'productsTmpl', foreach: lines}"> </tbody> <script type="text/html" id="productsTmpl"> <tr> <td style="width: 100px;"> <input data-bind="value: quantity" /> </td> ... </tr> </script> 
30. @JOHN_PAPA <p data-bind="if: lines().length > 0"> <span>Total value:</span> <span data-bind="text: grandTotal()"></span> </p>
31. @JOHN_PAPA <div data-bind="with: model"> <div data-bind="text: brand"></div> <div data-bind="text: name"></div> </div> <div> <div data-bind="text: model().brand"></div> <div data-bind="text: model().name"></div> </div>
32. @JOHN_PAPA
33. @JOHN_PAPA           
34. @JOHN_PAPA <ul> <li class="category">Acoustic Guitars<li> <!-- ko foreach:acousticProducts --> <li> <span data-bind="text: shortDesc></span> </li> <!-- /ko --> </ul> <!-- ko with: selectedPerson --> <span data-bind="text: name"></span> <input data-bind="value: salary"></input> <!-- /ko -->
35. @JOHN_PAPA
36. @JOHN_PAPA       
37. @JOHN_PAPA         
38. @JOHN_PAPA ko.bindingHandlers.fadeVisible = { init: function(element, valueAccessor) { // ... }, update: function(element, valueAccessor) { // ... } }
39. @JOHN_PAPA 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(); } }
40. @JOHN_PAPA
41. @JOHN_PAPA       
42. @JOHN_PAPA
43. @JOHN_PAPA