Your SlideShare is downloading. ×
0
INTRODUCTION   Knockout is a JavaScript library thathelps you to create rich, responsivedisplay and editor user interfaces...
HEADLINE FEATURESDeclarative BindingAutomatic UI RefreshDependency TrackingTemplating
ADDITIONAL FEATURES• Pure JavaScript Library• Compact (around 13kb after zipping)• Works on any mainstream browser  (IE 6+...
SOME QUESTIONS1. Is KO intended to compete with jQuery (or   Prototype, etc.) or work with it?2. How is Knockout different?
TO SUMMARIESKO doesn’t compete withjQuery or similar low-levelDOM APIs. KO provides acomplementary, high-level wayto link ...
HOW TO USEDownload the latest version ofthe Knockout JavaScript fileReference the file usinga <script> tag somewhere onyou...
KEY KO CONCEPTSMVVM & View ModelObservablesBindingsTemplates and Customization
MVVM (MODEL-VIEW-VIEW MODEL)      MODEL-VIEW-
VIEW MODELS To create a view modelwith KO, just declare anyJavaScript object. Forexample,var myViewModel = {   personName:...
USING VIEWMODEL INSIDE A VIEW Example to create a very simple view of that view model using a declarative binding :The nam...
ACTIVATING KNOCKOUT.JSko.applyBindings(myViewModel);     The name is <span>Bob</span>
OBSERVABLESQuestion: How can KO know whenparts of your view model change?Answer: You need to declare yourmodel properties ...
DECLARING OBSERVABLE PROPERTIESvar myViewModel = {   personName: ko.observable(Bob),   personAge: ko.observable(123)};
R/W OBSERVABLE PROPERTIES  To read myViewModel.personName()  To write myViewModel.personName(Mary)  To write values to mul...
COMPUTED OBSERVABLESThese are functions that are dependent on one ormore other observables, and will automaticallyupdate w...
COMPUTED OBSERVABLE – DECOMPOSING USER INPUT
COMPUTED OBSERVABLE – A VALUE CONVERTER
COMPUTED OBSERVABLE – FILTERING AND VALIDATING USER INPUT
DETERMINING IF A PROPERTY IS A COMPUTED              OBSERVABLE
OBSERVABLE ARRAYS If you want to detect and respond to changes onone object, you’d use observables. If you want todetect a...
READING INFORMATION FROM AN OBSERVABLE ARRAY // This observable array initially contains three objectsvar anotherObservabl...
KNOCKOUT BUILT IN BINDINGS
CONTROLLING TEXT AND APPEARANCEThe visible bindingThe text bindingThe html bindingThe css bindingThe style bindingThe attr...
THE VISIBLE BINDING
THE TEXT BINDING
THE HTML BINDING
THE CSS BINDING
THE STYLE BINDING
THE ATTR BINDING
CONTROLLING FLOW
THE FOREACH BINDING
THE IF BINDING
THE IFNOT BINDING
THE WITH BINDING
WORKING WITH FORM FIELDSThe click bindingThe event bindingThe submit bindingThe enable bindingThe disable bindingThe value...
THE CLICK BINDING
ALLOWING THE DEFAULT CLICK ACTION  By default, Knockout will prevent the click event from taking  any default action.  How...
THE EVENT BINDING
THE SUBMIT BINDING
THE ENABLE BINDING
THE DISABLE BINDINGThis is the mirror image of the enable binding.
THE VALUE BINDING
THE HASFOCUS BINDING
THE CHECKED BINDING
THE OPTIONS BINDING
THE SELECTED OPTIONS BINDING
THE UNIQUENAME BINDING
Thanks & Regards   Narendra Kumar PEminosoft India Pvt.Ltd.
Knockoutjs
Knockoutjs
Upcoming SlideShare
Loading in...5
×

Knockoutjs

691

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
691
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
56
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Knockoutjs"

  1. 1. INTRODUCTION Knockout is a JavaScript library thathelps you to create rich, responsivedisplay and editor user interfaces witha clean underlying data model.
  2. 2. HEADLINE FEATURESDeclarative BindingAutomatic UI RefreshDependency TrackingTemplating
  3. 3. ADDITIONAL FEATURES• Pure JavaScript Library• Compact (around 13kb after zipping)• Works on any mainstream browser (IE 6+, Firefox 2+, Chrome, Safari, others)
  4. 4. SOME QUESTIONS1. Is KO intended to compete with jQuery (or Prototype, etc.) or work with it?2. How is Knockout different?
  5. 5. TO SUMMARIESKO doesn’t compete withjQuery or similar low-levelDOM APIs. KO provides acomplementary, high-level wayto link a data model to a UI. KO itself doesn’t depend on jQuery, but you cancertainly use jQuery at the same time, andindeed that’s often useful if you want things likeanimated transitions.
  6. 6. HOW TO USEDownload the latest version ofthe Knockout JavaScript fileReference the file usinga <script> tag somewhere onyour HTML pages<script type=text/javascript src=knockout-2.1.0.js></script> Installation
  7. 7. KEY KO CONCEPTSMVVM & View ModelObservablesBindingsTemplates and Customization
  8. 8. MVVM (MODEL-VIEW-VIEW MODEL) MODEL-VIEW-
  9. 9. VIEW MODELS To create a view modelwith KO, just declare anyJavaScript object. Forexample,var myViewModel = { personName: Bob, personAge: 123};
  10. 10. USING VIEWMODEL INSIDE A VIEW Example to create a very simple view of that view model using a declarative binding :The name is <span data-bind="text:personName"></span>
  11. 11. ACTIVATING KNOCKOUT.JSko.applyBindings(myViewModel); The name is <span>Bob</span>
  12. 12. OBSERVABLESQuestion: How can KO know whenparts of your view model change?Answer: You need to declare yourmodel properties as observables,because these are special JavaScriptobjects that can notify subscribersabout changes, and can automaticallydetect dependencies.
  13. 13. DECLARING OBSERVABLE PROPERTIESvar myViewModel = { personName: ko.observable(Bob), personAge: ko.observable(123)};
  14. 14. R/W OBSERVABLE PROPERTIES To read myViewModel.personName() To write myViewModel.personName(Mary) To write values to multiple observable properties myViewModel.personName(‘PN1).personAge(50)So, when we write data-bind="text: personName",the text binding registers itself to be notifiedwhen personName changes.
  15. 15. COMPUTED OBSERVABLESThese are functions that are dependent on one ormore other observables, and will automaticallyupdate whenever any of these dependencies change. function AppViewModel() { this.firstName = ko.observable(Bob); this.lastName = ko.observable(Smith); this.fullName = ko.computed(function() { return this.firstName() + " " + this.lastName(); }, this); }
  16. 16. COMPUTED OBSERVABLE – DECOMPOSING USER INPUT
  17. 17. COMPUTED OBSERVABLE – A VALUE CONVERTER
  18. 18. COMPUTED OBSERVABLE – FILTERING AND VALIDATING USER INPUT
  19. 19. DETERMINING IF A PROPERTY IS A COMPUTED OBSERVABLE
  20. 20. OBSERVABLE ARRAYS If you want to detect and respond to changes onone object, you’d use observables. If you want todetect and respond to changes of a collection ofthings, use an observable Array. This is useful in manyscenarios where you’redisplaying or editing multiplevalues and need repeatedsections of UI to appear anddisappear as items are addedand removed.
  21. 21. READING INFORMATION FROM AN OBSERVABLE ARRAY // This observable array initially contains three objectsvar anotherObservableArray = ko.observableArray([ { name: "Bungle", type: "Bear" }, { name: "George", type: "Hippo" }, { name: "Zippy", type: "Unknown" }]); FUNCTIONS FOR OBSERVABLE COLLECTION indexOf, slice, pop, pus, unshift, reverse, sort, splice, remove, removeAll, destroy, destroyAll.
  22. 22. KNOCKOUT BUILT IN BINDINGS
  23. 23. CONTROLLING TEXT AND APPEARANCEThe visible bindingThe text bindingThe html bindingThe css bindingThe style bindingThe attr binding
  24. 24. THE VISIBLE BINDING
  25. 25. THE TEXT BINDING
  26. 26. THE HTML BINDING
  27. 27. THE CSS BINDING
  28. 28. THE STYLE BINDING
  29. 29. THE ATTR BINDING
  30. 30. CONTROLLING FLOW
  31. 31. THE FOREACH BINDING
  32. 32. THE IF BINDING
  33. 33. THE IFNOT BINDING
  34. 34. THE WITH BINDING
  35. 35. WORKING WITH FORM FIELDSThe click bindingThe event bindingThe submit bindingThe enable bindingThe disable bindingThe value bindingThe hasfocus bindingThe checked bindingThe options bindingThe selectedOptions bindingThe uniqueName binding
  36. 36. THE CLICK BINDING
  37. 37. ALLOWING THE DEFAULT CLICK ACTION By default, Knockout will prevent the click event from taking any default action. However, if you do want to let the default click action proceed, just return true from your click handler function. PREVENTING THE EVENT FROM BUBBLING<div data-bind="click: myDivHandler"> <button data-bind="click: myButtonHandler, clickBubble: false"> Click me </button></div>
  38. 38. THE EVENT BINDING
  39. 39. THE SUBMIT BINDING
  40. 40. THE ENABLE BINDING
  41. 41. THE DISABLE BINDINGThis is the mirror image of the enable binding.
  42. 42. THE VALUE BINDING
  43. 43. THE HASFOCUS BINDING
  44. 44. THE CHECKED BINDING
  45. 45. THE OPTIONS BINDING
  46. 46. THE SELECTED OPTIONS BINDING
  47. 47. THE UNIQUENAME BINDING
  48. 48. Thanks & Regards Narendra Kumar PEminosoft India Pvt.Ltd.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×