Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

John Papa
April 02, 2012

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.

John Papa

April 02, 2012
Tweet

More Decks by John Papa

Other Decks in Technology

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