Mvvm and KnockoutJS

2,429 views
2,260 views

Published on

A presentation i gave at JS-IL conference about building MVVM with KnockoutJS.

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,429
On SlideShare
0
From Embeds
0
Number of Embeds
184
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Mvvm and KnockoutJS

  1. 1. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Israel JavaScript Conference
  2. 2. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  3. 3. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Stands for Model-View-ViewModelNot technology specificAwesome with data binding!MVVM is, foremost, a separation pattern
  4. 4. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Basically just a JavaScript objectRepresents the data
  5. 5. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |A user friendly presentation of contentThe HTML representation layer
  6. 6. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Contains properties, methods and modelmodelHolds the behavior and data for the viewvar myViewModel = {name: ko.observable("Johnny"),lastName: ko.observable("Tordgeman")};
  7. 7. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  8. 8. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Helps create MVVM apps with observablesKnockout is a MVVM JavaScript framework
  9. 9. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  10. 10. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  11. 11. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |6+ 2+Separates behavior and structureDeclarative bindingsObservables
  12. 12. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |DeclarativeBindings
  13. 13. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  14. 14. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Observables are special JavaScriptobjects that can notify subscribers aboutchanges, and can automatically detectdependencies.
  15. 15. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Observable ComputedObservableArray
  16. 16. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |<input data-bind="value: name" placeholder="Name" />Declarative Bindingvar myViewModel = {name: ko.observable("Johnny")};Creating Observableko.applyBindings(myViewModel);Binding the ViewModelto the View
  17. 17. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  18. 18. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  19. 19. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |<section class="view-list" data-bind="foreach: games"><article class="article-container-full-width"><div><img data-bind="attr: { src: imageName }"class="img-polaroid"/><span data-bind="text: Title"></span> <br />Genre: <span data-bind="text: Genre"></span></div></article></section>
  20. 20. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |var firstName = ko.observable(Johnny);alert(firstName);alert(firstName());FunctiondefinitionWorks!firstName(Eyal);firstName = Eyal;Works!firstNamebecame astring
  21. 21. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  22. 22. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |When YouNeed aValue ThatDoesn’tExist in theWeb Service
  23. 23. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |var prdViewModel = {id: ko.observable(1),productPrice: ko.observable(199),productQty: ko.observable(30),productCurrency: ko.observable("$")};prdViewModel.sallery = ko.computed(function (){return parseInt(this.productQty() *this.productPrice()) + this.productCurrency();}, prdViewModel);
  24. 24. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  25. 25. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Trackswhichobjects arein the array
  26. 26. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  27. 27. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Text andappearance
  28. 28. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |<input type="text"data-bind="enable: allowEdit,value: price" /><select data-bind="options: colors,value: selectedColor,optionsText: name,optionsValue: key" ></select>Built intoKnockoutBinding forElementAttributesMultipleBindingExpressions
  29. 29. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |attr checked click css disableenable event hasfocus html optionsoptionsText optionsValue selectedOptions style submittext uniqueName value visible
  30. 30. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |attr checked click css disableenable event hasfocus html optionsoptionsText optionsValue selectedOptions style submittext uniqueName value visible
  31. 31. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |attr checked click css disableenable event hasfocus html optionsoptionsText optionsValue selectedOptions style submittext uniqueName value visible
  32. 32. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |attr checked click css disableenable event hasfocus html optionsoptionsText optionsValue selectedOptions style submittext uniqueName value visible
  33. 33. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |// Whenever the selectedProduct changes, reset theselectedPrice propertyviewmodel.selectedProduct.subscribe(function() {viewmodel.selectedPrice(undefined);}, viewmodel);
  34. 34. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |<p data-bind="if: lines().length > 0">Total value: <span data-bind="text: my.formatCurrency(grandTotal())"></span></p>
  35. 35. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |<div class="navbar-inner navbar-secondary"><div class="btn-group" data-bind="foreach: router.visibleRoutes"><a data-bind="attr: { href: hash }, css:{ active: isActive }, html: caption"class="btn btn-info"></a></div></div>For each visible route…Bind the route linkCheck if CSS should beactiveAnd its html to thecontent of the link
  36. 36. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  37. 37. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Knockout provides us with three methods for custom post-processing logic of our template:afterRenderafterAddbeforeRemove
  38. 38. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Just AnotherBinding
  39. 39. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |ko.bindingHandlers.yourBindingName = {init: function (element, valueAccessor,allBindingsAccessor, viewModel) {// This will be called when the binding is firstapplied to an element},update: function (element, valueAccessor,allBindingsAccessor, viewModel) {// This will be called once when the binding isfirst applied to an element,// and again whenever the associated observablechanges value.}};
  40. 40. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |ko.bindingHandlers.fadeVisible = {init: function (element, valueAccessor, allBindingsAccessor,viewModel) {var shouldDisplay = valueAccessor();$(element).toggle(shouldDisplay);},update: function (element, valueAccessor, allBindingsAccessor,viewModel) {var shouldDisplay = valueAccessor(),allBindings = allBindingsAccessor();shouldDisplay ? $(element).fadeIn() : $(element).fadeOut();}};Bound DOMelement1 Value passedto the binding2 All bindingson same element3
  41. 41. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  42. 42. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |While Knockout observables providesthe basic features necessary to supportreading/writing values and notifyingsubscribers when that value changes,you may wish to add your own logic to it.
  43. 43. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |ko.extenders.logChange = function (target, option) {target.subscribe(function (newValue) {console.log(option + ": " + newValue);});return target;};this.firstName = ko.observable("Bob").extend({logChange: "first name" });
  44. 44. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  45. 45. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Super easy data bindingAllows for extensibilityFun!
  46. 46. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |http://jpapa.me/teched13kohttp://johnpapa.net/SPAhttp://knockoutjs.com/documentation/introduction.htmlSPA with KnockoutJS
  47. 47. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  48. 48. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  49. 49. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

×