KnockoutJs

Agenda

Introduction
What is knockout?
Observables
Bindings
Custom Bindings
Utilities
Data Features
JavaScript

JavaScript (JS) is an interpreted programming language.

Its a dynamic language.
Supports object-oriented programming.
As part of web browsers, implementations allow
Client-side scripts to interact with the user.
Alter the document content that is displayed.
Control the browser.
Communicate asynchronously.
JavaScript was developed by Brendan Eich at Netscape.
Released in September 1995
Challenges with JavaScript

Inconsistent browser implementations to access the DOM, XML

parsing etc.
JavaScript supports global variables, which could cause
conflicts when using multiple libraries.
Creations of namespaces is not straight forward.
Implementation of object-oriented code differs from
conventional object-oriented languages.
KnockoutJS

Knockout is a JavaScript library that helps create rich, responsive display.

An MVVM Framework
Complementary to other JavaScript frameworks
jQuery, CoffeScript, Prototype etc
Features
Elegant dependency tracking
Declarative bindings
Pure JavaScript library
Works on any mainstream browser(IE 6+, Firefox 2+, Chrome, Safari,
others)
Can be integrated to an existing web application
The instance of knockout is referred with ko
Knockout Features

Data Bindings
Binds data from a source(ViewModel) to a target(Element on the view).
Supports one-way and two-way bindings.
Observables
Objects that hold data and can be observed for any changes.
Observables notify subscribes of changes.
Built on the GoF design pattern: Observable.
Dependency Tracking
Elements using data from an Observables do not have to explicitly subscribe
for changes.
Knockout implements dependency tracking, a mechanism by which all
dependent elements are automatically updated of changes.
Bindings

text
Causes the associated DOM element to display the text value of your
parameter.
Ex: <p data-bind="text: message>
Cannot pass HTML content
value
Links the associated DOM elements value with a property on your
view model.
Ex: <input data-bind="value: userId" />
Additional parameters: valueUpdate
values: keyup, keypress, afterkeydown.
Observable

JavaScript functions
Not all browsers support JavaScript getters/setters
Internally KOs bindings observe the observables
Three types :
Observable
Used for view model properties
ObservableArrays
Used for Collections
Computed
Encapsulates one or more observables
Bindings

checked
links a checkable form control.
<input type="checkbox" data-bind="checked: hasRecords" />
visible
Causes the associated DOM element to become hidden or visible
Ex: <div data-bind="visible: hasData">
css
Adds or removes one or more named CSS classes to the associated DOM element.
<div data-bind="css: { sampleClass: balance() < 10000 }">
style
adds or removes one or more style values to the associated DOM element.
<div data-bind="style: { color: balance() < 10000 ? 'red' : 'black' }">
Bindings

click
Adds an event handler to a DOM element for the onclick event.
Ex:
<button data-bind="click: saveData">Click me</button>
The handler receives the current model value as the first argument,
and the DOM event as the second argument.
Return true to proceed to the default click action.
Use clickBubble: false to prevent bubbling of the event.
submit
Adds an event handler to a DOM element for the submit action.
return true for the proceed to the default submit action.
Observable Arrays

ObservableArray allows detect and respond to changes of acollection of

types.
An observableArray tracks which objects are in the array, not the state of those
objects
ko.observableArray() for creating one.
Functions
push
pop
unshift
shift
reverse
remove
removeAll
Bindings

options
controls what options should appear in a drop-down listor multi-
select list.
Ex: <select data-bind="options: countries"></select>
Can be bound to an array of objects.
Additional Parametrs
optionsCaption
optionsText
optionsValue
optionsIncludeDestroyed
optionsAfterRender
Bindings

foreach
Binding that iterates an array and binds markup to the corresponding
array item.
Used for rendering lists and arrays
Ex: <tbody data-bind="foreach: employees">
$data: refers to each item in the array
$index: zero-based index of the current item.
$parent: handle to the parent of the bound array.
Knockout: Custom Bindings

Knockout provides a set of in-built bindings.

We can provide our on bindings.
Use the ko.bindingHandlers method to register custom bindings.
A custom binding defines 2 callbacks
init
update
Parametes to callbacks
element The DOM element involved in this binding
valueAccessor A JavaScript function that you can call to get the current model
property that is involved in this binding.
allBindingsAccessor A JavaScript function that you can call to getallthe model
properties bound to this DOM element.
viewModel
Knockout: Json Support

ko.toJS
Clones the view models object graph.
Substitutes each observable with the current value of that observable
Result will be a plain copy that contains only your data and no
Knockout-related artifacts
ko.toJSON
This produces a JSON string representing your view models data.
Internally invokes ko.toJSon the view model
Uses the browsers native JSON serializer on the result.
For older browsers (e.g., IE 7 or earlier), you must also reference the
json2.jslibrary.
Knockout: Extending Observables

Observables provide the basic features necessary to support

reading/writing values and notifying subscribers when that value
changes.
Extenders define a way to add functionality to the observers.
Use the ko.extenders object to define new functionality.
Takes 2 arguments
The Observable itself.
Any options as the second argument.
Knockout: The throttle extender

By default computed observables are re-evaluated

synchronously, as soon as each of their dependencies change.
Thethrottleextender delays the re-evaluation until its
dependencies have stopped changing for a specified period of
time.
Uses
Making things respond after a certain delay
Combining multiple changes into a single re-evaluation (also known
as atomic updates)
Books

jQuery in Action
Manning Publication
Ajax
OReilly