2. Presenter: Ankit Kumar, Mindfire Solutions
Agenda
Introduction
Key Concepts
Introduction to MVVM
Getting started
Observables
Bindings
– Control Flow
– Control over text and appearance
– Working with form fields
Interaction with Server-Side Technology
Demo
3. 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., changing depending on the user’s
actions or when an external data source changes),
KO can help you implement it more simply and
maintainably
Presenter: Ankit Kumar, Mindfire Solutions
4. Presenter: Ankit Kumar, Mindfire Solutions
Introduction
History: Steve Sanderson
Open Source
Pure JavaScript library (works with multiple
technology)
Can be added on top of your existing web
application
Compact (13kb approx)
Multiple Browser (IE 6+, Firefox 2+, Chrome, Safari,
others)
Solves: Rich interactivity & dynamic updates
5. Presenter: Ankit Kumar, Mindfire Solutions
Key Concepts
Declarative Binding: Easily associate DOM
elements with model data using a concise, readable
syntax
Automatic UI refreshes: When your data
model's state changes, your UI updates
automatically
6. Presenter: Ankit Kumar, Mindfire Solutions
Key Concepts
Declarative Binding: Easily associate DOM
elements with model data using a concise, readable
syntax
Automatic UI refreshes: When your data
model's state changes, your UI updates
automatically
7. Presenter: Ankit Kumar, Mindfire Solutions
Key Concepts
Dependency Tracking: Implicitly set up chains of
relationships between model data, to transform and
combine it.
We are taking about “Observables”
Templating: Quickly generate sophisticated,
nested UIs as a function of your model data
8. Presenter: Ankit Kumar, Mindfire Solutions
MVVM (Model View
ViewModel)
Model: objects and operations in your business
domain and is independent of any UI
View: interactive UI representing the state of the
view model. It displays information from the view
model, sends commands to the view model (e.g.
clicks events), and updates whenever the state of
the view model changes.
ViewModel: pure-code representation of the data
and operations on a UI. e.g, for a list editor, view
model would be an object holding a list of items, and
exposing methods to add and remove items
9. Presenter: Ankit Kumar, Mindfire Solutions
MVVM (Model View
ViewModel)
App Data
Interactive
UI
Data + UI
operation
10. Presenter: Ankit Kumar, Mindfire Solutions
Getting started
What all we need ???
Knockout.js
And
Jquery (if we need some Jquery animation/UI)
Hello World using Knockout(Demo)
11. Presenter: Ankit Kumar, Mindfire Solutions
Observables
Knockout provides 2 way binding.
This is achieved using observables.
var myViewModel = {
firstName: ko.observable('Mindfire'),
lastName: ko.observable('Solutions')
};
Read: myViewModel.personName()
Write: myViewModel.PersonName('Ltd')
12. Presenter: Ankit Kumar, Mindfire Solutions
Computed Observables
Computed Observables are very helpful when you
want to do some operation over observables.
var myViewModel = {
this.firstName: ko.observable('Mindfire'),
this.lastName: ko.observable('Solutions')
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
};
Now we can use “fullName” to bind values
13. Presenter: Ankit Kumar, Mindfire Solutions
Observables Array
Helps in detecting and responding to changes of a
collection of things.
var myObservableArray = ko.observableArray();
myObservableArray.push('Some value'); //push some value
var anotherObservableArray = ko.observableArray([
{ name: "Bungle", type: "Bear" },
{ name: "George", type: "Hippo" },
{ name: "Zippy", type: "Unknown" }
]);
Read: myObservableArray().length
MyObservableArray()[0] //gives 1st
element
14. Presenter: Ankit Kumar, Mindfire Solutions
Observables Array Functions
myObservableArray.push('Some new value') - adds a new item to the
end of array
myObservableArray.pop() - removes the last value from the array and
returns it
myObservableArray.unshift('Some new value') - inserts a new item at
the beginning of the array
myObservableArray.shift() - removes the first value from the array and
returns it
myObservableArray.reverse() - reverses the order of the array
myObservableArray.sort() - sorts the array contents.
15. Presenter: Ankit Kumar, Mindfire Solutions
Observables Array Functions
myObservableArray.remove(someItem) - removes all values that equal
someItem
myObservableArray.remove(function(item) { return item.age < 18 })
removes all values whose age property is less than 18, and returns
them as an array
myObservableArray.removeAll(['Chad', 132, undefined]) removes all
values that equal 'Chad', 123, or undefined and returns them as an
array
myObservableArray.removeAll() removes all values and returns them
as an array
16. Presenter: Ankit Kumar, Mindfire Solutions
Bindings
For Controlling Text and Appearance we have
– Visible binding
– Text binding
– Html binding
– Css binding
– Style binding
– Attr binding
Will see these in Demo
17. Presenter: Ankit Kumar, Mindfire Solutions
Bindings for control flow
For Control flow we have
– foreach binding
– if binding
– ifnot binding
– with binding
Will see these in Demo
19. Presenter: Ankit Kumar, Mindfire Solutions
Templates
The template binding populates the associated
DOM element with the results of rendering a
template.
– Native templating is the mechanism that
underpins foreach, if, with, and other control flow
bindings
– String-based templating is a way to connect
Knockout to a third-party template engine.