Download - Knockout.js explained
Introduction
Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.
Any time you have sections of UI that update dynamically (e.g., changes depending on the user’s actions or when an external data source changes), KO can help you implement it in a simple yet robust way.
Headline Features
• Declarative Binding• Automatic UI Refesh• Dependency Tracking• Templating
Additional Features
• Pure Javascript Library• Compact (around 13kb after gzipping)• Works on any mainstream browser (IE 6+, Firefox 2+, Chrome, Safari, others)
Some Questions
1. Is KO intended to compete with jQuery (or Prototype, etc.) or work with it?
2. How is Knockout different?
To Summarise
KO doesn’t compete with jQuery or similar low-level DOM APIs. KO provides a complementary, high-level way to link a data model to a UI. KO itself doesn’t depend on jQuery, but you can certainly use jQuery at the same time, and indeed that’s often useful if you want things like animated transitions.
• Download the latest version of the Knockout JavaScript file
• Reference the file using a <script> tag somewhere on your HTML pages
<script type='text/javascript' src='knockout-2.1.0.js'></script>
How To Use
• MVVM & View Model• Observables• Bindings• Templates and Customization
Key KO Concepts
To create a view model with KO, just declare any JavaScript object. For example,
var myViewModel = { personName: 'Bob', personAge: 123};
View Models
Example to create a very simple view of that view model using a declarative binding :
The name is <span data-bind="text: personName"></span>
Using ViewModel inside a View
ko.applyBindings(myViewModel); That does it! Now, view will display as if you’d written the
following HTML:
The name is <span>Bob</span>
Activating knockout.js
Question: How can KO know when parts of your view model change?
Answer: You need to declare your model properties as observables, because these are special JavaScript objects that can notify subscribers about changes, and can automatically detect dependencies.
Observables
var myViewModel = { personName: ko.observable('Bob'), personAge: ko.observable(123)};
Declaring 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 notified when personName changes (assuming it’s an observablevalue, which it is now).
R/W Observable Properties
• .subscribe() function• .dispose() function
Explicitly Subscribing to observables
These are functions that are dependent on one or more other observables, and will automatically update 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);}
Computed Observables
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 on one object, you’d use observables. If you want to detect and respond to changes of a collection of things, use an observableArray. This is useful in many scenarios where you’re displaying or editing multiple values and need repeated sections of UI to appear and disappear as items are added and removed.
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, push, shift, unshift, reverse, sort, splice, remove,
removeAll, destroy, destroyAll
Knockout built in Bindings -
1. Controlling text and appearance2. Control Flow3. Working with Form Fields
Controlling text and appearance
• The visible binding• The text binding• The html binding• The css binding• The style binding• The attr binding
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
The foreach binding
The if binding
The ifnot binding
The with binding
Working with Form Fields
• The click binding• The event binding• The submit binding• The enable binding• The disable binding• The value binding• The hasfocus binding• The checked binding• The options binding• The selectedOptions binding• The uniqueName binding
The click binding
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>
The event binding
The submit binding
The enable binding
The disable binding
This is the mirror image of the enable binding.
The value binding
The hasFocus binding
The checked binding
The options binding
The selectedoptions binding
The uniqueName binding
Thanks, Sumit Rathee & Mohit Kumar [email protected] [email protected] Website: www.paxcel.net
* The content of this presentation is derived from knockout official website documentation and samples: http://knockoutjs.com/