Hi everyone in this article I’m explaining about knockout.js.

Introduction:

Knockout is JavaScript library that helps you to create rich, responsive display and editor user interface with a clean underlying data model. Any time you have section of ui that update dynamically.

Elegant dependency tracking - automatically updates the right parts of your UI whenever your data model changes.

Declarative bindings - a simple and obvious way to connect parts of your UI to your data model. You can construct a complex dynamic UIs easily using arbitrarily nested binding contexts.

Trivially extensible - implement custom behaviors as new declarative bindings for easy reuse in just a few lines of code.

Benefits Knockout:

Pure JavaScript library - works with any server or client-side technology

Can be added on top of your existing web application without requiring major

architectural changes

Compact - around 13kb after zipping

Works on any mainstream browser (IE 6+, Firefox 2+, Chrome, Safari, others)

Comprehensive suite of specifications (developed BDD-style) means its correct

functioning can easily be verified on new browsers and platforms

 

Observables:

Knockout is built around three core features

1.       Observables and dependency tracking.

2.       Declarative bindings

3.       Templating

On this page you’ll learn about the first of these three but before that let’s examine the mvvm pattern and the concept of a view model.

MVVM and View Models:

Model-View-View Model (MVVM) is a design pattern for building user interfaces. It describes how you can keep a potentially sophisticated UI simple by splitting it into three parts:

1. A model: your application’s stored data. This data represents objects and operations in your business domain (e.g., bank accounts that can perform money transfers) and is independent of any UI. When using KO, you will usually make Ajax calls to some server-side code to read and write this stored model data.
2. A view model: a pure-code representation of the data and operations on a UI. For example, if you’re implementing a list editor, your view model would be an object holding a list of items, and exposing methods to add and remove items.
3.  Note that this is not the UI itself: it doesn’t have any concept of buttons or display styles. It’s not the persisted data model either - it holds the unsaved data the user is working with. When using KO, your view models are pure JavaScript objects that hold no knowledge of HTML. Keeping the view model abstract in this way lets it stay simple, so you can manage more sophisticated behaviors without getting lost.

4. A view: a visible, interactive UI representing the state of the view model. It displays information from the view model, sends commands to the view model (e.g., when the user clicks buttons), and updates whenever the state of the view model changes.

When using KO, your view is simply your HTML document with declarative bindings to link it to the view model. Alternatively, you can use templates that generate HTML using data from your view model.

View Model:

The View Model, as the name implies, is the Model for View. The View Model is a superset of the Model (the M in MVC and MVP). Where the Model is a logical representation of a business entity such as an invoice or a customer, the View Model includes the Model plus other metadata the View may require. Examples of the metadata may include the background color, applicable CSS classes as well as the web page’s height and width. What you choose to include in a View Model is a judgment call on your part, which should be driven by your application feature’s business and technical requirements.

Data Binding:

In this section, I’ll discuss what the “Hello World” example is effectively for Knockout.js. Relative to the MVVM primer in the previous section, the following is an example of uni-directional binding where a DOM object is hydrated with a data value hosted within the View Model.

You should make sure you have downloaded Knockout.js from knockoutjs.com. In this article, I’ll use version 2.2. The following code represents some simple HTML markup that references Knockout.js data binding feature:

<pdata-bind="text:helloValue"></p>
<pdata-bind="text:worldValue"></p>

The previous code snippet shows two p tags each with the data-bind attribute and value assigned. The text contained within the first p tag will get its value from the helloValue property and the text within the second p tag will get its value from the worldValue property. The question is, where are these properties hosted? The answer is the View Model. From the previous discussion on the MVVM pattern, the View Model holds the data for the View. The following code snippet shows the View Model to support the Hello World data binding:

function helloWorldViewModel() {
        this.helloValue = "Hello";
        this.worldValue = "World";
    }

At this point, we have HTML markup that references data and we have a View Model that holds the data. In this case, the View Model and the Model are one and the same thing. In later examples, I will separate the two. For purposes of this example, the Model and View Models overlap; and there are times in practice where you may choose to follow this approach. So how do we connect the View to the Model/View Model? In other words, how do we connect the MVVM? The following code snippet fills that gap:

ko.applyBindings(new helloWorldViewModel());

The ko object is the global reference to Knockout. For the page we are on, Knockout traverses the DOM and searches for the data-bind attributes. From there, it is simply a matter of matching up the names. Put together, Listing 1 illustrates the code for the Hello World View.