KnockoutJS Introduction

Prepared by : Balakrishnan

KnockoutJS Introduction

• Client-Side MVVM JavaScript Library

• 40kb (minified), 166kb (debug)

• No dependencies

• Works on all mainstream browsers

IE6+, FF2+, Chrome, Safari, Opera

• Developed with BDD

• NuGet or knockoutjs.com

MVVM Pattern

MODEL

VIEW MODEL

VIEW

Knockout Features

Dependency Tracking

Automatic UI Refresh

Declarative Bindings

Templating

Demo - 1

• Basic Example

• data-bind attribute

• ko.observable()

• Ko.observableArray()

• ko.applyBindings()

• Demo

• Basics jsFiffle.net/BalaIn

• Dropdown

Demo - 2

• Basic Example• Built In bindings

• Click

• Visible

• Css

• Value

• Text

• Style

• hasFocus

• Submit

• Demo• Submit

• hasFocus

Demo - 3

• Custom Binding

• Template

• Demo

• http://jsfiddle.net/balain/nu91g603/

• http://jsfiddle.net/balain/nu91g603/3/

• http://jsfiddle.net/balain/nu91g603/2/

Demo - 4

• Some basic mapping (without mapping plugin)• ko.utils.arrayMap()

• Mapping (without mapping plugin)• Ko.utils.parseJson()

• Save data• Ko.toJSON(viewModel)

• Demo• http://jsfiddle.net/ybo0zrwh/

• http://jsfiddle.net/balain/berthw4c/

• http://jsfiddle.net/rniemeyer/vdcUA/

• http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html

Demo - 5

• Binding Contexts

$root

$parent

$parents

$parents[0] == $parent

$parent[1] … $parent[n]

$data

Demo

http://jsfiddle.net/balain/nu91g603/6/

http://knockoutjs.com/documentation/binding-context.html

Debugging Ko

Why Knockout

• High level link between UI & data model

• Extensible

• Usable in existing apps/architecture

• Learning Resources

• Same MV* pattern & benefits as other solutions

Resources

• knockoutjs.com

Live Examples/Tutorials

Documentation

• Knock Me Out - Ryan Niemeyer’s blog

• http://www.dotnet-tricks.com/Tutorial/knockout

• Debugging Ko

• jsFiddle

Questions