What is KnockOut.Js?

Knockout.Js (simply KO) is a powerful JavaScript library which allows developers to bind DOM elements with any data model like array, Json etc.

It built up on two way data binding between UI and data model i.e. if any changes made to data model are affected to UI as well as any changes made to UI are affected to data model.

It’s not alternative to JQuery or any other libraries.

It provides easy and understandable way to manage any type of complex data driven models as instead of tracking each UI element in a web page on affected data and will automatically updated the DOM elements when any modifications to data model.

KO Architectural Design Pattern

KO implements MVVM (Model-View-View Model) pattern. MVVM is an architectural design pattern developed by Microsoft for WPF/Silverlight applications.

MVVM follows the programming principle of “Separation of Concern” i.e. it completely separate GUI rendering from Application Logic.

MVVM mainly contains 3 parts:

1)      MODEL: It holds Application Data i.e. when user entered input data with DOM elements. That data stored to Model.

2)      VIEW: It holds Application UI (DOM Elements)

3)      VIEW MODEL: It mainly rely on Connector between Model and View. It holds both data and function.

Knockout.js features:

1)      Declarative Bindings: It allows binding UI elements to data model.

2)      Dependency Tracking:  It automatically updates the parts of UI whenever data model updates and vice versa. It can be done by special type of variables called “Observables”

3. Templating:  populates the associated DOM element with the results of rendering a template like (for each ,for ,if, third party template engines as JQuery tmpl)

Advantages of KO:

1)      We can connect UI elements to any data model at any moment.

2)      Easily encapsulates complex data model in to our Application with minimal code.

3)      Two way Data Binding.

4)      Fully integrated with Even driven programming model

5)      We can extend to custom behaviours where ever we need easily.

6)      Supports all major browsers.

Implementation of KO:

Following Steps required to implement KO in an application.

Step 1: Create View Model with KO as JavaScript Object

E.g.

var myViewModel = {

    Name: 'Naresh',

    Age: 32

};

Step 2: Create a View for the above View Model as DOM elements

E.g.

 Name is

In above syntax “data-bind” attribute is declarative binding of KO

Step 3: Activating KO

ko.applyBindings(myViewModel);

In above function first parameter denotes what view model object we want to use with the declarative bindings it activates

It accepts another optional parameter as html element ID which restricts the view model to that element and its descendants. This can be happened with more than one View models defined in an application.

Observables:

The main intention of using KO is two way data binding i.e. UI Changes according to data model changes and vice versa. This can be achieved by declaring model properties as Observables.

E.g.

var myViewModel = {

    Name: ko.observable(‘Naresh’),

    Age: ko.observable (32)

};

If we declare any model property as Observable. Then it automatically notifies and updates UI as well as data model and identity dependencies whenever it occurred.

Reading and writing Observables:

To read an Observable we declare as myViewModel.Name();

To write an Observable we declare as myViewModel.Name(‘some value’);

Observable Array:

If we want to detect and update changes on collection of objects then we declare as an Observable Array.

E.g.

var ObservableArray = ko.observableArray([

    {name: "Naresh", age: "32" },

    {name: "Praveen", age: "23" },

    {name: "Vinay", age: "29" }

]);

Integration of KO in Asp.Net:

Step 1: Download latest knockout.js file from Http://knockoutjs.ocm

Step 2: Add Script reference to Application as shown below

Step 3: Create View Model as shown below

Step 4: Bind that View Model to UI element as shown below

In the above View Model “Computed” function denotes calculating value from more than one Observable.

If we run the sample application during page load FirstName, LastName text boxes and fullName span values are appended to Naresh, Reddy, and Naresh Reddy.

If we change any one or two textboxes values then it automatically detects the changes and span value also changed accordingly.

These are the fundamental Concepts about KnockOut.Js which I like to share. More information and in-depth analysis on KO and how to design Complex Data models to be coming soon…… will keep you guys posted!!!