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 :)

1. Knockout.js Introduction
By Sarvesh Kushwaha

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
Detail Blog 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 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. Sarvesh Kushwaha |
|
|
|
|
|