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.

Transcript

1. @JOHN_PAPA
   @JOHN_PAPA
   

   View Slide

2. @JOHN_PAPA
   
   
   
   
   
   
   
   

   View Slide

3. @JOHN_PAPA
   

   View Slide

4. @JOHN_PAPA
   

   View Slide

5. @JOHN_PAPA
   6+ 2+
   

   View Slide

6. @JOHN_PAPA
   
   var myViewModel = {
   firstName: ko.observable("John")
   };
   ko.applyBindings(myViewModel);
   http://jsfiddle.net/johnpapa/BEzJc/
   

   View Slide

7. @JOHN_PAPA
   
   
   
   
   
   
   
   

   View Slide

8. @JOHN_PAPA
   
   
   
   
   
   
   
   
   
   

   View Slide

9. @JOHN_PAPA
   Guitar model:
   Sales price:
   var product = {
   id: 1001, model: "Taylor 314ce", salePrice: 1199.95
   };
   $("#guitarModel").val(product.model);
   $("#guitarSalesPrice").val(product.salePrice);
   

   View Slide

10. @JOHN_PAPA
    

    View Slide

11. @JOHN_PAPA
    
    
    
    
    
    
    
    

    View Slide

12. @JOHN_PAPA
    
    
    
    
    

    View Slide

13. @JOHN_PAPA
    Guitar model:
    
    Sales price:
    
    product: {
    id: ko.observable(1001),
    model: ko.observable("Taylor 314ce"),
    salePrice: ko.observable(1199.95)
    }
    ko.applyBindings(data);
    

    View Slide

14. @JOHN_PAPA
    

    View Slide

15. @JOHN_PAPA
    
    
    
    
    
    
    
    

    View Slide

16. @JOHN_PAPA
    
    
    
    
    
    
    

    View Slide

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

    View Slide

18. @JOHN_PAPA
    

    View Slide

19. @JOHN_PAPA
    
    
    
    
    
    
    
    

    View Slide

20. @JOHN_PAPA
    
    
    
    
    
    
    

    View Slide

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

    View Slide

22. @JOHN_PAPA
    

    View Slide

23. @JOHN_PAPA
    
    
    
    
    
    
    
    

    View Slide

24. @JOHN_PAPA
    data-bind="enable: allowEditing, value:salePrice" />
    
    
    
    
    

    View Slide

25. @JOHN_PAPA
    

    View Slide

26. @JOHN_PAPA
    

    View Slide

27. @JOHN_PAPA
    
    
    
    
    
    
    
    

    View Slide

28. @JOHN_PAPA
    

    View Slide

29. @JOHN_PAPA
    data-bind="template: {name: 'productsTmpl', foreach: lines}">
    
    <br/><tr><br/><td style="width: 100px;"><br/><input data-bind="value: quantity" /><br/></td><br/>...<br/></tr><br/>
    
    

    View Slide

30. @JOHN_PAPA
    
    Total value:
    
    
    

    View Slide

31. @JOHN_PAPA
    
    
    
    
    
    
    
    
    

    View Slide

32. @JOHN_PAPA
    

    View Slide

33. @JOHN_PAPA
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

34. @JOHN_PAPA
    
    Acoustic Guitars
    
    
    
    
    
    

    View Slide

35. @JOHN_PAPA
    

    View Slide

36. @JOHN_PAPA
    
    
    
    
    
    
    
    

    View Slide

37. @JOHN_PAPA
    
    
    
    
    
    
    
    
    
    

    View Slide

38. @JOHN_PAPA
    ko.bindingHandlers.fadeVisible = {
    init: function(element, valueAccessor) {
    // ...
    },
    update: function(element, valueAccessor) {
    // ...
    }
    }
    

    View Slide

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

    View Slide

40. @JOHN_PAPA
    

    View Slide

41. @JOHN_PAPA
    
    
    
    
    
    
    
    

    View Slide

42. @JOHN_PAPA
    

    View Slide

43. @JOHN_PAPA
    

    View Slide