Introduction To Knockout.js - Part Two

Rupesh Kahane

10y15.3k15100Article

MVVM KnockoutjsLearn Knockout.jsBinding in Knockout.js

15 Comments

Join the conversation! Your thoughts help the community grow.

Bhuvanesh Mohankumar10y ago
Good to read
Rupesh Kahane10y ago
thanks to Nanddeep Nachan
Nanddeep Nachan10y ago
Nice share
Vignesh Mani10y ago
Good
- Rupesh Kahane10y ago
  Thanks a lot
Sibeesh Venu10y ago
Nice Share
- Rupesh Kahane10y ago
  Thanks
Santhakumar Munuswamy10y ago
Thanks for nice article
- Rupesh Kahane10y ago
  Thanks
Prasham Sabadra10y ago
Thanks Rupesh :)
- Rupesh Kahane10y ago
  Thanks a lot sir
Rupesh Kahane10y ago
thanks to Shubham Kumar, Amit Singh & Pankaj Kumar Choudhary also
Pankaj Kumar Choudhary10y ago
Nice Explain...........
Amit Kumar Singh10y ago
Nice One
Shubham Kumar10y ago
very nice

Before reading this article, I highly recommend reading the previous part of the series:

Introduction To Knockout.JS - Part 1

KnockOut.Js

Why to Use MVVM (A Model View ViewModel)

This is used to define the business models.
Here we can create different types of object classes for use of separate UI (User Interface) logic from business functionality for easier testing.
A model is representing the real world object in our business logic.
It includes functions & properties.
ViewModel is used for communication (connection) between View & Model.
Binding is used for connection between properties & events of UI to functions.

What is Binding in KnockOut.js

To establish relationship between View & ViewModel.
Pass user action to ViewModel.
Manipulate elements on View based on ViewModel observable properties.

Demo for observable:

Step 1: Create one project in VS 2013. Create any empty application.

Add action method & view for same action method.

Add the following code to our view:

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Demo</title>
<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/knockout-3.4.0.js"></script>
<script>
$(document).ready(function () {
var employeeName = ko.observable("Rupesh");
alert(employeeName());
})
</script>
</head>
<body>
<div></div>
</body>
</html>

Step 2: Run the application, we will see name is in alter:

output

Demo for Binding using MVVM

Step 1: By right click on project add Knockout.js & JavaScript files from Manage Nuget packages.

Now add one JavaScript file for Knockout.js code. Here in this demo we can see on button click event we will show & hide the image.

Also add the following references & code to above created file as follows:

/// <reference path="jquery-2.2.0.js" />
/// <reference path="knockout-3.4.0.js" />
$(document).ready(function ()
{
var imageViewModel = {
myImage: ko.observable(false),
showMyImage: function ()
{
this.myImage(true);
},
hideMyImage: function ()
{
this.myImage(false);
}
};
ko.applyBindings(imageViewModel);
});

Step 2: Now I am going to create one folder for images where I can put some images.

Step 3: I am using ASP.NET MVC 5. So I am going to create one controller with some action methods as well as views for that particular action method.

Step 4: Now create view for our action and add the following code.

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/knockout-3.4.0.js"></script>
<script src="~/Scripts/Intro-KO.js"></script>
</head>
<body>
<div>
<div data-bind="visible:myImage">
<img src="~/images/thanks.jpg" alt="thanks" style="width:200px;height:300px;" />
</div>
<div>
<button data-bind="click:showMyImage"> Show Image </button>
<button data-bind="click:hideMyImage"> Hide Image </button>
</div>
</div>
</body>
</html>

Now run our application & see the output as:

After clicking the button Show Image.

In the following code there is little bit difference than above code. In above case we have used data-bind.

Step 1: Create one new action method in our controller.

Create view against this action & add the following code:

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/knockout-3.4.0.js"></script>
<script>
$(document).ready(function () {
var myViewModel =
{
showImage: ko.observable(false)
};
$('#showLogo').click(function () {
myViewModel.showImage(true);
});
$('#hideLogo').click(function () {
myViewModel.showImage(false);
});
ko.applyBindings(myViewModel);
})
ko.applyBindings(imageViewModel);
</script>
</head>
<body>
<div>
<div data-bind="visible:showImage">
<img src="~/images/CSCLogo.png" alt="C#Corner" style="width:200px;height:150px;" />
</div>
<div>
<button id="showLogo"> Show Logo </button>
<button id="hideLogo"> Hide Logo </button>
</div>
</div>
</body>
</html>

In this case I have added all code in single file for better understanding.

Step 2: Now run the application.

After button click on show logo.

Summary

This article will help fresher candidates to understand Knockout.js.