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

More Decks by John Papa

Other Decks in Technology


  1. @JOHN_PAPA <input data-bind="value: firstName" /> var myViewModel = { firstName:

    ko.observable("John") }; ko.applyBindings(myViewModel); http://jsfiddle.net/johnpapa/BEzJc/
  2. @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);
  3. @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);
  4. @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);
  5. @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>
  6. @JOHN_PAPA <input type="text" data-bind="enable: allowEditing, value:salePrice" /> <select data-bind="options: colors,

    value: selectedColor, optionsText: 'name', optionsValue: 'key'" ></select>   
  7. @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> 
  8. @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>
  9. @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 -->
  10. @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(); } }