A Brief Introduction to KnockoutJS

Introduction

Since I just began working on a web application project that uses the MVVM design pattern, I just started to learn KnockoutJS.

Before getting into KnockoutJS, let us discuss the MVVM design pattern.

What is MVVM?

MVVM is a design pattern introduced by Microsoft for WPF/Silverlight applications by John Gossman back in 2005. The main aspect of the MVVM pattern is "Separation Of Concerns".

The MVVM pattern solves the problem of de-coupling the View from the Model, so that Views can be implemented by the designers instead of software developers.

Key parts of MVVM

The three key parts of the MVVM design is View, ViewModel and Model.

View

1. The View is the presentation of the data/information on the screen.
2. View does not have the knowledge of the Model.
3. View binds the control's properties & events to the View Model.

ViewModel

1. ViewModel is the intermediary between the View and Model.
2. Viewmodel exposes methods, commands, and other points that help maintain the state of the view.
3. The VM manipulates the model as the result of actions on the view, and triggers events in the view itself.

Model

1. The model is the domain object.
2. The model represents the actual data we are dealing with.
3. The Model holds the information, but not behaviors or services.

So let us discuss how to implement the MVVM design pattern in our application using KnockoutJS.

Getting started with KnockoutJS

KnockoutJS is a pure JavaScript framework to implement the MVVM design pattern in the web application development. The main key concepts of KO is:

• Declarative Bindings
• Automatic UI Refresh
• Dependency Tracking
• Templating

KnockoutJS is the best JS framework for the MVVM design pattern I believe. Let us create a simple view knockout application to display "Hello" in front of the name entered.

To use knockoutJS, we need to include the js file in our application. If you are using Visual Studio as the IDE then you can useNuget to include the knockoutjs file in your project.

After adding the framework to the project, just add the preceding line or drag the knockout js file into the corresponding page and place it.

View

Here we can see the View with the knockout bindings.

<div id="view">
    <span>Type Your Name:</span>
    <input type="text" data-bind="value: model.name, valueUpdate: 'afterkeydown'" />
    <div data-bind="text: 'Hello ' + model.name(), click: sayHai">
    </div>
</div>

The data-bind attribute in the element tells the kncokout framework that the element associates the "value" attribute of the input control with the knockout observable property "name". The knockout binding parameter "value" will update the input control's value.

Model

//model
var TheModel = function () {
this.name = ko.observable('Jaganathan');
};

The model has the information to be displayed to the user. Here we have the JS model "TheModel" that has the name property. The ko.observable('Jaganathan') makes the name an observable property. We will be discussing more about the knockout properties later.

ViewModel

As we discussed, the ViewModel interacts with the view as well as the model.

//viewmodel var viewModel = function() {
this.model = new TheModel();
};
    viewModel.prototype.sayHai = function () {
    alert('Say hai..');
}

We have a command that will be executed when the user clicks on the Hello text.

Applying Knockout Binding

Now we are all set to go. The soul of the kncokout + view lives in the following line.

//Giving soul to the view
ko.applyBindings(new viewModel, document.getElementById('view'));

The ko.applyBindings binds the knockout viewmodel with the view. The first parameter of the applyBindings is the viewmodel that has the properties and commands to be bound with the view. The next parameter is the id of the element to be bound.

Note: if you don't provide the second parameter for the applyBindings method then the knockout will bind the given viewmodel to the entire page.

So we are done with the basics of KnockoutJS.

Output

Thanks for reading. Comments are most welcome.
 
Happy coding.