Knockout.js Introduction

By Sarvesh Kushwaha
What is Knockout?
• JavaScript MVVM Framework
• MVVM – Model-View-View Model
• Model – objects in your business domain
• V...
Knockout Key Concepts

Detail Blog Link
Knockout Key Features
• Observables
• Built-in Bindings
• Custom Bindings
• KO Utilities
• Data Features
Knockout Observable
• observable
• Used for view model properties

• observable arrays
• Used for collections

• computed/...
Knockout Built-in Bindings – Type 1 :Controlling
text and appearance
1.
2.
3.
4.
5.
6.

The visible binding
The text bindi...
Knockout Built-in Bindings – Type 2:
Control Flow
• if binding
• Executes if condition is true

• Ifnot binding
• Executes...
Knockout Built-in Bindings – Type 3:Forms
1. Click binding adds an event handler so that your chosen JavaScript
function w...
Knockout Built-in Bindings – Type
4:Templates
• JavaScript templates
• Traditional JavaScript template in <script> tag usi...
Knockout Custom bindings
• We’re not limited to using the built-in bindings like click, value, and
so on — we can create o...
Knockout Utilities
• ko.utils.arrayFilter
• ko.utils.arrayFirst
• ko.utils.arrayForEach
• ko.utils.arrayIndexOf
• ko.utils...
Knockout Data Features
• ko.toJS()
• JavaScript object with just data and no Knockout constructs

• ko.toJSON()
• Produces...
External links and tutorials
• Knock Me Out — Ryan Niemeyer’s excellent blog containing ideas,
thoughts, and discussion ab...
Sarvesh Kushwaha |

|

|

|

|

|
Upcoming SlideShare
Loading in …5
×

Knockout Introduction

1,614 views

Published on

This presentation just giving the overview of knockout java script library. To make my points and definition clear i will blog for each slide on my blog - http://sarveshkushwaha.blogspot.com .Keep connected to learn knockout from scratch.Thanks :)

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,614
On SlideShare
0
From Embeds
0
Number of Embeds
64
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Knockout Introduction

  1. 1. Knockout.js Introduction By Sarvesh Kushwaha
  2. 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. 3. Knockout Key Concepts Detail Blog Link
  4. 4. Knockout Key Features • Observables • Built-in Bindings • Custom Bindings • KO Utilities • Data Features
  5. 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. 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. 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. 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. 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. 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. 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. 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. 13. External links and tutorials • 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. 14. Sarvesh Kushwaha | | | | | |

×