Knockout.js

Knockout.js
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

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

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

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

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

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

MVVM (Model View
ViewModel)
App Data
Interactive
UI
Data + UI
operation

Getting started
What all we need ???
Knockout.js
And
Jquery (if we need some Jquery animation/UI)
Hello World using Knockout(Demo)

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

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

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

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.

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

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

Bindings for control flow
For Control flow we have
– foreach binding
– if binding
– ifnot binding
– with binding
Will see these in Demo

Binding Events
Click binding
Event binding
Submit binding
Enable/disable binding
Value binding
HasFocus Binding
Checked Binding
Options binding
Selected binding
Unique binding

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.

Server Side Interaction
DEMO

Questions ?

Thank You

Knockout.js

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Knockout.js

Similar to Knockout.js (20)

More from Mindfire Solutions

More from Mindfire Solutions (20)

Recently uploaded

Recently uploaded (20)

Knockout.js