Custom Binding Handlers
and Persisting Data
John Papa
@john_papa
http://johnpapa.net
Outline






Custom Binding Handlers
Unobtrusive JavaScript
Saving/Loading Data
Change Tracking
Mapping
What Are Custom Binding Handlers?
 Just another binding


Can’t find the right built-in binding? Make your own!

 Examp...
init and update
Runs the first time
the binding is eval’d
ko.bindingHandlers.fadeVisible = {
init: function(element, value...
Parameters
The bound
element in the
DOM

What is
passed to
the binding

All other bindings in the
same data-bind attribute...
DEMO
Custom Binding Handlers
Outline






Custom Binding Handlers
Unobtrusive JavaScript
Saving/Loading Data
Change Tracking
Mapping
Unobtrusive Event Handlers and Helpers
<div class="closeIcon"
data-bind="click:$parent.removeProduct"></div>
<div class="c...
Unobtrusive JavaScript: Binding Mappings
Move data-bind
to JavaScript/jQuery

$("#total").attr("data-bind","value: grandTo...
DEMO
Unobtrusive JavaScript Events
Outline






Custom Binding Handlers
Unobtrusive JavaScript
Saving/Loading Data
Change Tracking
Mapping
Loading / Saving Data
 Add Controller


Simple load and save methods

 Add Models
 Add



papa.ajaxservice.js
datase...
DEMO
Saving / Loading Data
Outline






Custom Binding Handlers
Unobtrusive JavaScript
Saving/Loading Data
Change Tracking
Mapping
Change Tracking

vm.tracker = new ChangeTracker(viewModel);
// Did It Change?
vm.tracker().somethingHasChanged();
// Hook ...
DEMO
Change Tracking
Outline






Custom Binding Handlers
Unobtrusive JavaScript
Saving/Loading Data
Change Tracking
Mapping
Mapping JSON to Objects
 Creating observables can be monotonous
 Especially …


Ajax to fetch data and return JSON

 K...
Mapping
load = function () {
my.PersonSvc.getPersons(
function (result) {
model(ko.mapping.fromJS(result));
}
);
};
save =...
Summary






Custom Binding Handlers
Unobtrusive JavaScript
Saving/Loading Data
Change Tracking
Mapping
For more in-depth online developer training visit

on-demand content from authors you trust
Upcoming SlideShare
Loading in …5
×

Knockout mvvm-m6-slides

1,076 views

Published on

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

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,076
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Knockout mvvm-m6-slides

  1. 1. Custom Binding Handlers and Persisting Data John Papa @john_papa http://johnpapa.net
  2. 2. Outline      Custom Binding Handlers Unobtrusive JavaScript Saving/Loading Data Change Tracking Mapping
  3. 3. What Are Custom Binding Handlers?  Just another binding  Can’t find the right built-in binding? Make your own!  Examples  Animate a transition for an item   Integrate with jQuery UI   fadeVisible jqButton Get creative  starRating
  4. 4. init and update Runs the first time the binding is eval’d ko.bindingHandlers.fadeVisible = { init: function(element, valueAccessor) { // ... }, update: function(element, valueAccessor) { // ... } } After init, and every time one of its observables changes
  5. 5. Parameters The bound element in the DOM What is passed to the binding All other bindings in the same data-bind attribute ko.bindingHandlers.fadeVisible = { init: function(element, valueAccessor, allBindingsAccessor, viewModel) { var shouldDisplay = valueAccessor(); $(element).toggle(shouldDisplay); }, The overall view model update: function(element, valueAccessor, allBindingsAccessor, viewModel) { var shouldDisplay = valueAccessor(); shouldDisplay ? $(element).fadeIn() : $(element).fadeOut(); } }
  6. 6. DEMO Custom Binding Handlers
  7. 7. Outline      Custom Binding Handlers Unobtrusive JavaScript Saving/Loading Data Change Tracking Mapping
  8. 8. Unobtrusive Event Handlers and Helpers <div class="closeIcon" data-bind="click:$parent.removeProduct"></div> <div class="closeIcon"></div> //In the view model removeProduct = function (p) { products.remove(p); } data available for binding on the element var itemSelector = "ul li"; $(itemSelector).on("click", "div.closeIcon", function () { my.vm.removeProduct(ko.dataFor(this)); });
  9. 9. Unobtrusive JavaScript: Binding Mappings Move data-bind to JavaScript/jQuery $("#total").attr("data-bind","value: grandTotal"); $("#total").attr("data-bind","css: {hilite: metGoal}");
  10. 10. DEMO Unobtrusive JavaScript Events
  11. 11. Outline      Custom Binding Handlers Unobtrusive JavaScript Saving/Loading Data Change Tracking Mapping
  12. 12. Loading / Saving Data  Add Controller  Simple load and save methods  Add Models  Add   papa.ajaxservice.js dataservice.js
  13. 13. DEMO Saving / Loading Data
  14. 14. Outline      Custom Binding Handlers Unobtrusive JavaScript Saving/Loading Data Change Tracking Mapping
  15. 15. Change Tracking vm.tracker = new ChangeTracker(viewModel); // Did It Change? vm.tracker().somethingHasChanged(); // Hook this into your view model functions // (ex: load, save) ... // Resync Changes vm.tracker().markCurrentStateAsClean;
  16. 16. DEMO Change Tracking
  17. 17. Outline      Custom Binding Handlers Unobtrusive JavaScript Saving/Loading Data Change Tracking Mapping
  18. 18. Mapping JSON to Objects  Creating observables can be monotonous  Especially …  Ajax to fetch data and return JSON  Knockout JS Mapper  Community created plug in  Map   Converts JSON to an object with observables Unmap  Converts mapped object back to a regular JavaScript object
  19. 19. Mapping load = function () { my.PersonSvc.getPersons( function (result) { model(ko.mapping.fromJS(result)); } ); }; save = function () { var person = ko.mapping.toJSON(model()); my.PersonSvc.savePerson(person, function (result) { // ... } ); };
  20. 20. Summary      Custom Binding Handlers Unobtrusive JavaScript Saving/Loading Data Change Tracking Mapping
  21. 21. For more in-depth online developer training visit on-demand content from authors you trust

×