X
02Feb

Introduction to KnockOut.Js in Asp.Net

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 Pattern

 

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”

  1. 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


 
     

First name:

   

Last name:

   

Hello, !

 
Note: View Model script should place in the body or JQuery document function if used because KO works when fully DOM renders in browser.

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!!!

Related

Token Based Authentication for Web API's

Securing ASP.NET Web API using Custom Token Based AuthenticationProviding a security to the Web API&...

Read More >

ASP.NET: Audit Trail Implementation using Entity Framework

When you are working with certain projects which involves the Customer records, you might need to tr...

Read More >

Dependency Injection on SignalR

                &nbs...

Read More >

Create custom project templates in Visual Studio

Visual studio installation comes with the various predefined project templates, and we can use one o...

Read More >

Part 2 of KnockOut.js in Asp.Net

Computed Observables:             &...

Read More >

Introduction on SignalR

Introduction on SignalRReal–Time Web ApplicationThe real-time web is a set of technologies tha...

Read More >

How to upload documents to SharePoint 2013

IntroductionSharePoint is a browser-based collaboration, content management, and extensible platform...

Read More >

Introduction to Amazon S3 (Simple Storage Service) and EC2 (Elastic Cloud Computing) in Asp.Net

S3 is an Internet storage engine which has to be designed to make job easier for developers.Develope...

Read More >

How to use Model Binding with ASP.NET Data Controls

IntroductionASP.NET 4.5 provides a flexible alternative to server data controls called as, Model Bin...

Read More >

Using XMPP and Openfire server in ASP.NET C# - Part -2

Roster in XMPPRoster are the contacts of  user (contact list). Roster Handlers in AgsXmppL...

Read More >

Share

Post a Comment

  • Recent
  • Popular
  • Tag
Monthly Archive
Subscribe
Name

Text/HTML
Contact Us
  • *
  • *