knockout mvvm-m2-slides
DESCRIPTION
Playlists : https://www.youtube.com/watch?v=OZEitVGFSWk&list=PLLQgkMVoGtcsh5_X02dR3Nc0p_igtM0aO&index=2TRANSCRIPT
![Page 1: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/1.jpg)
Bindings and Observables
John Papa @john_papa
http://johnpapa.net
![Page 2: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/2.jpg)
Outline
Without Data Binding Observables Computed Observables ObservableArray Subscribing to Changes
![Page 3: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/3.jpg)
Without Data Binding
Manual push from source object to target elements
Manual pull From target elements to source object
jQuery can assist Simplify code, but code still required
What about “Data Binding” Notifications? When do you push, when do you pull? Not true data binding
![Page 4: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/4.jpg)
Manual Push via jQuery
<span>Guitar model:</span><input id="guitarModel" /> <span>Sales price:</span><input id="guitarSalesPrice" />
var product = { id: 1001, model: "Taylor 314ce", salePrice: 1199.95 };
$("#guitarModel").val(product.model); $("#guitarSalesPrice").val(product.salePrice);
Source object
Push from Source to Target
![Page 5: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/5.jpg)
DEMO
Without Data Binding
![Page 6: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/6.jpg)
Outline
Without Data Binding Observables Computed Observables ObservableArray Subscribing to Changes
![Page 7: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/7.jpg)
Taylor 110
Taylor 914ce Taylor 914ce
Taylor 110
Knockout’s Observables
Wrap properties in observable function ko.observable();
2 Way Binding Both sides are updated with changes
![Page 8: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/8.jpg)
2 Way Binding
<span>Guitar model:</span> <input data-bind="value: product.model"/> <span>Sales price:</span> <span data-bind="text: product.salePrice"></span> product: { id: ko.observable(1001), model: ko.observable("Taylor 314ce"), salePrice: ko.observable(1199.95) }
ko.applyBindings(data);
Source object
Bind Source to Target, & Vice Versa
Declarative Binding
![Page 9: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/9.jpg)
DEMO
Observables
![Page 10: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/10.jpg)
Outline
Without Data Binding Observables Computed Observables ObservableArray Subscribing to Changes
![Page 11: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/11.jpg)
Computed Members
Define a function to evaluate a value, and use it for binding Ex: Last Name, Photo Url, Currency Totals
When its observables change, it also notifies that changes occurred
Manage “this”
Pass in an owner for “this”, if needed
computed is formerly known as dependentObservable
![Page 12: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/12.jpg)
Defining a Computed Member
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);
observables
owner
![Page 13: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/13.jpg)
DEMO
Computed
![Page 14: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/14.jpg)
Defining a Computed Converter
vm.extendedPrice = ko.computed({ read: function () { // return an expression with observables }, write: function (value) { // parse values and store in an observable }, owner: //put your viewmodel here });
read (required)
write
Computed members can define read and write behavior
Great for custom converters
owner
![Page 15: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/15.jpg)
DEMO
Computed Converters
![Page 16: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/16.jpg)
Outline
Without Data Binding Observables Computed Observables ObservableArray Subscribing to Changes
![Page 17: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/17.jpg)
ObservableArray
Tracks which object are in the array, not their state
Notify when items are Added Removed
No notification when properties of item in collection change
use ko.observable for those properties
![Page 18: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/18.jpg)
Working with observableArray
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 } ]) };
<span data-bind="text: products().length"></span>
Pre-populating
Operating on observableArray
![Page 19: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/19.jpg)
DEMO
ObservableArray
![Page 20: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/20.jpg)
destroy destroyAll indexOf pop
push remove removeAll reverse
shift slice sort splice
unshift
Observable Array Functions
![Page 21: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/21.jpg)
DEMO
ObservableArray Functions
![Page 22: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/22.jpg)
Outline
Without Data Binding Observables Computed Observables ObservableArray Subscribing to Changes
![Page 23: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/23.jpg)
Subscribing to Changes
// Whenever the selectedMake changes, reset the selectedModel viewmodel.selectedMake.subscribe(function () { viewmodel.selectedModel(undefined); }, viewmodel);
Register to be notified when changes occur
Similar to writing code in a property setter in .NET
Useful when you need to take action when a property changes
![Page 24: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/24.jpg)
DEMO
Subscribing to Changes
![Page 25: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/25.jpg)
Summary
Without Data Binding Observables Computed Observables ObservableArray Subscribing to Changes
![Page 26: Knockout mvvm-m2-slides](https://reader034.vdocuments.net/reader034/viewer/2022052618/554f9269b4c905435d8b514f/html5/thumbnails/26.jpg)
For more in-depth online developer training visit
on-demand content from authors you trust