KnockoutJS and MVVM with JavaScript - TechED 2013

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.

0d3794fe37746ea54926ca6878712721?s=128

John Papa

June 08, 2013
Tweet

Transcript

  1. None
  2. Knockout Data Binding

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

  4. None
  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>
  7. None
  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

  32. None
  33. None
  34. See more at http://www.fotolia.com/johnpapa