Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
651
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
52
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. INTRODUCTION Knockout is a JavaScript library thathelps you to create rich, responsivedisplay and editor user interfaces witha clean underlying data model.
  • 2. HEADLINE FEATURESDeclarative BindingAutomatic UI RefreshDependency TrackingTemplating
  • 3. ADDITIONAL FEATURES• Pure JavaScript Library• Compact (around 13kb after zipping)• Works on any mainstream browser (IE 6+, Firefox 2+, Chrome, Safari, others)
  • 4. SOME QUESTIONS1. Is KO intended to compete with jQuery (or Prototype, etc.) or work with it?2. How is Knockout different?
  • 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. 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. KEY KO CONCEPTSMVVM & View ModelObservablesBindingsTemplates and Customization
  • 8. MVVM (MODEL-VIEW-VIEW MODEL) MODEL-VIEW-
  • 9. VIEW MODELS To create a view modelwith KO, just declare anyJavaScript object. Forexample,var myViewModel = { personName: Bob, personAge: 123};
  • 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. ACTIVATING KNOCKOUT.JSko.applyBindings(myViewModel); The name is <span>Bob</span>
  • 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. DECLARING OBSERVABLE PROPERTIESvar myViewModel = { personName: ko.observable(Bob), personAge: ko.observable(123)};
  • 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. 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. COMPUTED OBSERVABLE – DECOMPOSING USER INPUT
  • 17. COMPUTED OBSERVABLE – A VALUE CONVERTER
  • 18. COMPUTED OBSERVABLE – FILTERING AND VALIDATING USER INPUT
  • 19. DETERMINING IF A PROPERTY IS A COMPUTED OBSERVABLE
  • 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. 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. KNOCKOUT BUILT IN BINDINGS
  • 23. CONTROLLING TEXT AND APPEARANCEThe visible bindingThe text bindingThe html bindingThe css bindingThe style bindingThe attr binding
  • 24. THE VISIBLE BINDING
  • 25. THE TEXT BINDING
  • 26. THE HTML BINDING
  • 27. THE CSS BINDING
  • 28. THE STYLE BINDING
  • 29. THE ATTR BINDING
  • 30. CONTROLLING FLOW
  • 31. THE FOREACH BINDING
  • 32. THE IF BINDING
  • 33. THE IFNOT BINDING
  • 34. THE WITH BINDING
  • 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. THE CLICK BINDING
  • 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. THE EVENT BINDING
  • 39. THE SUBMIT BINDING
  • 40. THE ENABLE BINDING
  • 41. THE DISABLE BINDINGThis is the mirror image of the enable binding.
  • 42. THE VALUE BINDING
  • 43. THE HASFOCUS BINDING
  • 44. THE CHECKED BINDING
  • 45. THE OPTIONS BINDING
  • 46. THE SELECTED OPTIONS BINDING
  • 47. THE UNIQUENAME BINDING
  • 48. Thanks & Regards Narendra Kumar PEminosoft India Pvt.Ltd.