Presented by

Naresh & Kiran

 Knockout

• Knockout makes it easier to keep your data

and your UI in sync with each other.

• It follows MVVM (Model, View, ViewModel)

pattern...
Model, View, ViewModel (MVVM)

ViewModel
This is the data which is
linked to the user interface

Model View
This is the This is the HTML
native data and JavaScript
which make up
stored by your
your UI..
application.
 Model
1. The model represents the actual
data and/or information we are
dealing with.
2. The key with the model is that it
holds the information, but not
behaviors or services that
manipulate the information
3. Model is not responsible for
formatting text to look pretty on the
screen, or fetching a list of items
from a remote server
 View
1. It is the presentation of the data
which end user really interacts
with.
2. The view manages input such as
key presses, mouse movements
etc., which ultimately manipulates
properties of the model.
3. The view in MVVM contains
behaviors, events, and data-
bindings that ultimately require
knowledge of the underlying
model and viewmodel.
 ViewModel
1. ViewModel acts as mediator
between View and Model
2. The model simply holds the data,
the view simply holds the formatted
data , and the controller acts as the
communicator between the two.
3. The controller might take input from
the view and place it on the model,
or it might interact with a service to
retrieve the model, then translate
properties and place it on the view.
 Model, View, ViewModel (MVVM)

1. Data is "imported" from your native model to

the ViewModel
2. When data is updated it is "exported" back to
your native model
3. When data in the ViewModel is updated,
those updates are automatically written to
the UI
4. When data in the UI is updated, those
changes are automatically written to the
ViewModel
Model, View, ViewModel (MVVM)

• The simplest examples skip the Model and

just use a ViewModel and View

• Practical use does require a Model to store

values
 How To Use
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>
 Key KO Concepts
• View Model

• Observables

• Bindings

• Templates and Customization

 View Models
To create a view model with KO, just declare any
JavaScript object. For example,

var myViewModel = {
personName: 'Bob',
personAge: 123
};
Observables
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.
Declaring Observable Properties
var myViewModel = {
personName: ko.observable('Bob'),
personAge: ko.observable(123)
};
R/W Observable Properties
• To read myViewModel.personName()
• To write myViewModel.personName('Mary')
• To write values to multiple observable
properties
myViewModel.personName(‘PN1').personAge(2
5)
So, when we write data-bind="text: personName",
the text binding registers itself to be notified
when personName changes (assuming it’s an
observable
value, which it is now). Modify Example
Computed 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);
}
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 objects
this.items= ko. observableArray(["alpha","beta","gamna"]);
Functions for Observable Collection
indexOf, pop, push, shift, unshift, reverse, sort, remove, removeAll

items.indexOf('Blah') will return the zero-based index of the array

items.push(‘value') adds a new item to the end of array
items.pop() removes the last value from the array and returns it
items.unshift(‘value') inserts a new item at the beginning of the array
items.shift() removes the first value from the array and returns it
items.reverse() reverses the order of the array
items.sort() sorts the array contents.
items.remove(someItem) removes all values that equal someItem.
items.removeAll() remove all items
The visible binding
The html binding
The css binding
The style binding