Working with Knockout.js Part 1: Getting started with Knockoutjs

In this post we will take a look on Knockout.js. We will start with basic theoretical introduction and then to some basic demo on Knockout.js

image

Knockout.js helps us to create dynamic JavaScript UI using the MVVM pattern. It simplifies the task of linking Data Model to the dynamic JavaScript UI.

Knockout.js is a JavaScript library and it helps us to create high responsive, very rich and interactive JavaScript UI adhering to MVVM pattern. It simplifies the task of binding data from Data Model to JavaScript UI. It is a pure JavaScript library and it works with almost all the browsers. It is an open source project under the license of MIT. It is very compact in size. Its zipped size is 13kb and it can be added over any existing web application.

Essentially Knockout.js helps to link a Data Model to UI. It tracks the changes and dynamically updates the UI. It helps to perform two ways binding in between UI and Data Model. It updates certain section of UI dynamically when data in data model is changed. It simplifies the task of binding and dynamic updating the UI.

Some of the features of Knockout.js can be outlined as below,

  • It detects the data changes in data model and updates respective part of the UI.
  • It binds data and UI declaratively. In other words declarative binding between data model and UI can be done using Knockout.js
  • It helps to create custom behavior. Custom behavior can be created as declarative binding.
  • Custom behavior created by Knockout.js can be reused with very less lines of code.
  • It helps to create complex dynamic UI using declarative bindings.
  • It helps to edit JSON data on the JavaScript UI.

Knockout.js is JavaScript MVVM framework and it helps in

image

Further in the post, we will explore each features of Knockout.js. You can download Knockout.js from here. You will get many versions of Knockout.js to download on the download page. For usual production purpose you can choose to download knockout-versionnumber.js file.

After downloading add reference of Knockout.js. Reference can be added as following,

image

Next let us create a ViewModel. We are going to create ViewModel for Product. A ViewModel can be created as following. You can see that in knockout ViewModel is nothing but a JavaScript array,

image

Once you have created ViewModel you need to apply binding. Binding can be applied as below,

image

Last step is to bind values from ViewModel on the view. That can be done as following. Using data-bind attribute values from ViewModel can be bind to element on View.

image

A complete example of Product ViewModel data being bind with elements of View is given below,


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="Scripts/jquery-1.7.1.js"></script>
 <script src="Scripts/knockout-2.2.0.js"></script>
 <script type="text/javascript" >
 $(document).ready(function () {

var ProductViewModel = {
 productname: "pen",
 productprice: 200,
 producttype :"education"
 };
 ko.applyBindings(ProductViewModel);

});

 </script>
</head>
<body>

<h2>Knockout Demo</h2>
 Product Name : <span id="namespan" data-bind="text:productname"></span> <br />
 Product Price : <span id ="pricespan" data-bind="text:productprice"></span><br />
 Product Type : <span id="typesapn" data-bind="text:producttype"></span> <br />

</body>
</html>

And as expected you will get values from ViewModel on View elements as following

image

This was small introduction of Knockout.js. In further posts we will get into more details of Knockout.js and see examples of its usage in real examples. I hope you find this post useful. Thanks for reading

11 thoughts on “Working with Knockout.js Part 1: Getting started with Knockoutjs

  1. if i have a pen class or object what should i do ? or if i have two object one object’s property is other object …for example my productname is pen object’s property……var ProductViewModel = {

    productname: Pen.penName; is it true?

    productprice: 200,

    producttype :”education”

    };

    ko.applyBindings(ProductViewModel);

  2. Thank you for the great and useful articel.. may be one small issue .. :

    .. You can see that in knockout ViewModel is nothing but a JavaScript array, ..

    For me it looks like a JSON Notate Object, not an array.

  3. Hello,
    Thanks for the explanation. I am new to MVVM , and i wanted to understand ,
    if you have a model in the back end, say a c# library which is getting data from the database or any other service. how would the Model notify the viewmodel.

    i understand in the MVVM INotifyprovier does that for WPF , but how about Web app based scenariou, does Viewmodel in javascript always have to ping Model to identify if there is a change in the model and then propagate to UI.
    I am assuming that the viewmodel would always have to send Ajax request to a asmx or api with a set interval of 10 minutes or so (just an example).
    is that how it works end to end. any example will be great.

    Thanks

    Rahul

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s