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.

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