Post
Ask Question

Introduction To Knockout.js - Part Two

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

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:

  1. @{  
  2.     Layout = null;  
  3. }  
  4.   
  5. <!DOCTYPE html>  
  6. <html>  
  7.     <head>  
  8.         <meta name="viewport" content="width=device-width" />  
  9.         <title>Demo</title>  
  10.         <script src="~/Scripts/jquery-2.2.0.js"></script>  
  11.         <script src="~/Scripts/knockout-3.4.0.js"></script>  
  12.         <script>  
  13.             $(document).ready(function () {  
  14.                 var employeeName = ko.observable("Rupesh");  
  15.                 alert(employeeName());  
  16.             })  
  17.         </script>  
  18.     </head>  
  19.     <body>  
  20.         <div></div>  
  21.     </body>  
  22. </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:
  1. /// <reference path="jquery-2.2.0.js" />  
  2. /// <reference path="knockout-3.4.0.js" />  
  3. $(document).ready(function ()  
  4. {  
  5.     var imageViewModel = {  
  6.         myImage: ko.observable(false),  
  7.         showMyImage: function ()  
  8.         {  
  9.             this.myImage(true);  
  10.         },  
  11.         hideMyImage: function ()  
  12.         {  
  13.             this.myImage(false);  
  14.         }  
  15.     };  
  16.     ko.applyBindings(imageViewModel);  
  17. });  
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.
  1. @{  
  2.     Layout = null;  
  3. }  
  4.   
  5. <!DOCTYPE html>  
  6. <html>  
  7.     <head>  
  8.         <meta name="viewport" content="width=device-width" />  
  9.         <title>Index</title>  
  10.         <script src="~/Scripts/jquery-2.2.0.js"></script>  
  11.         <script src="~/Scripts/knockout-3.4.0.js"></script>  
  12.         <script src="~/Scripts/Intro-KO.js"></script>  
  13.     </head>  
  14.     <body>  
  15.         <div>  
  16.             <div data-bind="visible:myImage">  
  17.                 <img src="~/images/thanks.jpg" alt="thanks" style="width:200px;height:300px;" />  
  18.             </div>  
  19.             <div>  
  20.                 <button data-bind="click:showMyImage"> Show Image </button>  
  21.                 <button data-bind="click:hideMyImage"> Hide Image </button>  
  22.             </div>  
  23.         </div>  
  24.     </body>  
  25. </html>  
Now run our application & see the output as:

see the output

After clicking the button Show Image.

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:
  1. @{  
  2.     Layout = null;  
  3. }  
  4.   
  5.   
  6. <!DOCTYPE html>  
  7. <html>  
  8.     <head>  
  9.         <meta name="viewport" content="width=device-width" />  
  10.         <title>Test</title>  
  11.         <script src="~/Scripts/jquery-2.2.0.js"></script>  
  12.         <script src="~/Scripts/knockout-3.4.0.js"></script>  
  13.         <script>  
  14.   
  15.             $(document).ready(function () {  
  16.   
  17.                 var myViewModel =  
  18.   
  19.                 {  
  20.   
  21.                     showImage: ko.observable(false)  
  22.   
  23.                 };  
  24.   
  25.                 $('#showLogo').click(function () {  
  26.   
  27.                     myViewModel.showImage(true);  
  28.   
  29.                 });  
  30.   
  31.                 $('#hideLogo').click(function () {  
  32.   
  33.                     myViewModel.showImage(false);  
  34.   
  35.                 });  
  36.   
  37.                 ko.applyBindings(myViewModel);  
  38.   
  39.             })  
  40.   
  41.   
  42.             ko.applyBindings(imageViewModel);  
  43.   
  44.         </script>  
  45.     </head>  
  46.     <body>  
  47.         <div>  
  48.             <div data-bind="visible:showImage">  
  49.                 <img src="~/images/CSCLogo.png" alt="C#Corner" style="width:200px;height:150px;" />  
  50.             </div>  
  51.             <div>  
  52.                 <button id="showLogo"> Show Logo </button>  
  53.                 <button id="hideLogo"> Hide Logo </button>  
  54.             </div>  
  55.         </div>  
  56.     </body>  
  57. </html>  
In this case I have added all code in single file for better understanding.

Step 2: Now run the application.

run the application

After button click on show logo.

show logo

Summary

This article will help fresher candidates to understand Knockout.js.
 
Read more articles on Knockout.js:
 

 


Similar Articles