Tweet
Tweet

Slide 1

Slide 1 text

@JOHN_PAPA @JOHN_PAPA

Slide 2

Slide 2 text

@JOHN_PAPA       

Slide 3

Slide 3 text

@JOHN_PAPA

Slide 4

Slide 4 text

@JOHN_PAPA

Slide 5

Slide 5 text

@JOHN_PAPA 6+ 2+

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

@JOHN_PAPA       

Slide 8

Slide 8 text

@JOHN_PAPA         

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

@JOHN_PAPA

Slide 11

Slide 11 text

@JOHN_PAPA       

Slide 12

Slide 12 text

@JOHN_PAPA    

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

@JOHN_PAPA

Slide 15

Slide 15 text

@JOHN_PAPA       

Slide 16

Slide 16 text

@JOHN_PAPA      

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

@JOHN_PAPA

Slide 19

Slide 19 text

@JOHN_PAPA       

Slide 20

Slide 20 text

@JOHN_PAPA      

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

@JOHN_PAPA

Slide 23

Slide 23 text

@JOHN_PAPA       

Slide 24

Slide 24 text

@JOHN_PAPA   

Slide 25

Slide 25 text

@JOHN_PAPA

Slide 26

Slide 26 text

@JOHN_PAPA

Slide 27

Slide 27 text

@JOHN_PAPA       

Slide 28

Slide 28 text

@JOHN_PAPA

Slide 29

Slide 29 text

@JOHN_PAPA <tr> <td style="width: 100px;"> <input data-bind="value: quantity" /> </td> ... </tr> 

Slide 30

Slide 30 text

@JOHN_PAPA

Total value:

Slide 31

Slide 31 text

@JOHN_PAPA

Slide 32

Slide 32 text

@JOHN_PAPA

Slide 33

Slide 33 text

@JOHN_PAPA           

Slide 34

Slide 34 text

@JOHN_PAPA
  • Acoustic Guitars

Slide 35

Slide 35 text

@JOHN_PAPA

Slide 36

Slide 36 text

@JOHN_PAPA       

Slide 37

Slide 37 text

@JOHN_PAPA         

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

@JOHN_PAPA

Slide 41

Slide 41 text

@JOHN_PAPA       

Slide 42

Slide 42 text

@JOHN_PAPA

Slide 43

Slide 43 text

@JOHN_PAPA