Knockout Introduction

Knockout Introduction

• 1.
  Knockout.js Introduction By SarveshKushwaha
• 2.
  What is Knockout? •JavaScript MVVM Framework • MVVM – Model-View-View Model • Model – objects in your business domain • View – user interface that is visible to user • View Model – code representing data/operations on a UI • Detail Blog Link
• 3.
  Knockout Key Concepts DetailBlog Link
• 4.
  Knockout Key Features •Observables • Built-in Bindings • Custom Bindings • KO Utilities • Data Features
• 5.
  Knockout Observable • observable •Used for view model properties • observable arrays • Used for collections • computed/dependent observables • Encapsulate one or more other observables Detail Blog Link
• 6.
  Knockout Built-in Bindings– Type 1 :Controlling text and appearance 1. 2. 3. 4. 5. 6. The visible binding The text binding The html binding The css binding The style binding The attr binding
• 7.
  Knockout Built-in Bindings– Type 2: Control Flow • if binding • Executes if condition is true • Ifnot binding • Executes if condition is false • Foreach binding • Executes for each item in collection • With binding • Executes for object specified (descendant elements)
• 8.
  Knockout Built-in Bindings– Type 3:Forms 1. Click binding adds an event handler so that your chosen JavaScript function will be invoked when the associated DOM element is clicked. 2. Event Handler invoked for any event on DOM element such as keypress, mouseover or mouseout. 3. Submit Handler invoked when when the associated DOM element is submitted. Use this on form elements. 4. Enable DOM element enabled if parameter value is true 5. Disable DOM element disabled if parameter value is true 6. Value of DOM element 7. HasFocus binding DOM element focus state if parameter value is true 8. Checked Attached to checkbox and radio button 9. Options Collection of elements in dropdown or multi-select 10. selectedOptions Currently selected item(s) of dropdown or multi-select 11. uniqueName Ensures DOM element has “name” attribute
• 9.
  Knockout Built-in Bindings– Type 4:Templates • JavaScript templates • Traditional JavaScript template in <script> tag using knockout control flow • String-based templating works only once you’ve referenced a suitable template engine, such as jQuery.tmpl or the Underscore template engine.
• 10.
  Knockout Custom bindings •We’re not limited to using the built-in bindings like click, value, and so on — we can create our own ones.
• 11.
  Knockout Utilities • ko.utils.arrayFilter •ko.utils.arrayFirst • ko.utils.arrayForEach • ko.utils.arrayIndexOf • ko.utils.arrayMap • ko.utils.arrayPushAll • ko.utils.arrayRemoveItem • ko.utils.compareArrays • ko.utils.unwrapObservable
• 12.
  Knockout Data Features •ko.toJS() • JavaScript object with just data and no Knockout constructs • ko.toJSON() • Produces JSON string representing view model’s data (calls ko.toJS() internally)
• 13.
  External links andtutorials • Knock Me Out — Ryan Niemeyer’s excellent blog containing ideas, thoughts, and discussion about KnockoutJS and related technologies • PluralSight Knockout.js training course — Online videos - John Papa provides almost 5 hours of in-depth content • Editing a variable-length list, Knockout-style — Steve Sanderson shows the advantages of using Knockout with ASP.NET MVC • Knockout+WebSockets — Carl Hörberg combines Knockout, Sinatra, SQLite, and WebSockets to implement realtime forms collaboration • Wiki - Recipes — User contributed recipes and examples • Wiki - Plugins — User contributed list of plugins
• 14.
  Sarvesh Kushwaha | | | | | |