$30 off During Our Annual Pro Sale. View Details »

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.

John Papa

June 08, 2013
Tweet

More Decks by John Papa

Other Decks in Technology

Transcript

  1. View Slide

  2. Knockout Data Binding

    View Slide

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

    View Slide

  4. View Slide


  5. Declarative
    Binding
    var myViewModel = {
    code: ko.observable('DEV338')
    };
    ko.applyBindings(myViewModel);
    Create an
    Observable
    Bind the ViewModel
    to the View

    View Slide

  6. var title = ko.observable();

    Title


    View Slide

  7. View Slide










  8. View Slide


  9. Title



    Track



    View Slide

  10. name('Kat');
    Use
    Parentheses
    to Unwrap

    View Slide

  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!

    View Slide

  12. Unwrapping observable function in code
    Dive into objects with declarative binding
    sessions().length
    speaker().imagePath

    View Slide









  13. View Slide

  14. When You
    Need a Value
    That Doesn’t
    Exist in the
    Web Service

    View Slide

  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

    View Slide

  16. var hasChanges = ko.computed(function() {
    return datacontext.hasChanges();
    });
    var canSave = ko.computed(function() {
    return hasChanges() && !isSaving();
    });

    View Slide

  17. Tracks which
    objects are in
    the array

    View Slide

  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 }
    ])
    };

    Pre-populating
    Operating on
    observableArray

    View Slide

  19. Declarative Bindings in HTML

    View Slide

  20. data-bind="enable: allowEdit, value: price" />

    Built into
    Knockout
    Binding for
    Element
    Attributes
    Multiple
    Binding
    Expressions

    View Slide

  21. attr checked click css disable
    enable event hasfocus html options
    optionsText optionsValue selectedOptions style submit
    text uniqueName value visible

    View Slide

  22. attr checked click css disable
    enable event hasfocus html options
    optionsText optionsValue selectedOptions style submit
    text uniqueName value visible

    View Slide

  23. attr checked click css disable
    enable event hasfocus html options
    optionsText optionsValue selectedOptions style submit
    text uniqueName value visible

    View Slide

  24. attr checked click css disable
    enable event hasfocus html options
    optionsText optionsValue selectedOptions style submit
    text uniqueName value visible

    View Slide


  25. Total value:

    Any truthy
    expression

    View Slide














  26. For every session,
    render this article

    View Slide

  27. Custom Bindings

    View Slide

  28. Just Another
    Binding

    View Slide

  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

    View Slide

  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

    View Slide

  31. Use
    Breakpoints

    View Slide

  32. View Slide

  33. View Slide

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

    View Slide