Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Knockout mvvm-m2-slides

on

  • 934 views

Playlists : https://www.youtube.com/watch?v=OZEitVGFSWk&list=PLLQgkMVoGtcsh5_X02dR3Nc0p_igtM0aO&index=2

Playlists : https://www.youtube.com/watch?v=OZEitVGFSWk&list=PLLQgkMVoGtcsh5_X02dR3Nc0p_igtM0aO&index=2

Statistics

Views

Total Views
934
Views on SlideShare
934
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Knockout mvvm-m2-slides Presentation Transcript

  • 1. Bindings and Observables John Papa @john_papa http://johnpapa.net
  • 2. Outline      Without Data Binding Observables Computed Observables ObservableArray Subscribing to Changes
  • 3. 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
  • 4. Manual Push via jQuery <span>Guitar model:</span><input id="guitarModel" /> <span>Sales price:</span><input id="guitarSalesPrice" /> Source object var product = { id: 1001, model: "Taylor 314ce", salePrice: 1199.95 }; $("#guitarModel").val(product.model); $("#guitarSalesPrice").val(product.salePrice); Push from Source to Target
  • 5. DEMO Without Data Binding
  • 6. Outline      Without Data Binding Observables Computed Observables ObservableArray Subscribing to Changes
  • 7. Knockout’s Observables  Wrap properties in observable function  ko.observable();  2 Way Binding  Both sides are updated with changes Taylor 110 Taylor 914ce
  • 8. 2 Way Binding Declarative 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) } Source object ko.applyBindings(data); Bind Source to Target, & Vice Versa
  • 9. DEMO Observables
  • 10. Outline      Without Data Binding Observables Computed Observables ObservableArray Subscribing to Changes
  • 11. 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
  • 12. Defining a Computed Member vm = { id: ko.observable(1), salePrice: ko.observable(4199), qty: ko.observable(2) }; observables vm.extendedPrice = ko.computed(function () { return this.product() ? this.salePrice() * parseInt("0" + this.qty(), 10) : 0; }, vm); owner
  • 13. DEMO Computed
  • 14. Defining a Computed Converter  Computed members can define read and write behavior  Great for custom converters read (required) vm.extendedPrice = ko.computed({ read: function () { // return an expression with observables }, write write: function (value) { // parse values and store in an observable }, owner: //put your viewmodel here owner });
  • 15. DEMO Computed Converters
  • 16. Outline      Without Data Binding Observables Computed Observables ObservableArray Subscribing to Changes
  • 17. 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
  • 18. Working with observableArray var myViewModel = { Pre-populating 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 } ]) }; Operating on observableArray <span data-bind="text: products().length"></span>
  • 19. DEMO ObservableArray
  • 20. Observable Array Functions destroy destroyAll indexOf pop push remove removeAll reverse shift slice sort splice unshift
  • 21. DEMO ObservableArray Functions
  • 22. Outline      Without Data Binding Observables Computed Observables ObservableArray Subscribing to Changes
  • 23. Subscribing to Changes  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 // Whenever the selectedMake changes, reset the selectedModel viewmodel.selectedMake.subscribe(function () { viewmodel.selectedModel(undefined); }, viewmodel);
  • 24. DEMO Subscribing to Changes
  • 25. Summary      Without Data Binding Observables Computed Observables ObservableArray Subscribing to Changes
  • 26. For more in-depth online developer training visit on-demand content from authors you trust