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

KnockOut.Js

Why to Use MVVM (A Model View ViewModel)

What is Binding in KnockOut.js

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. }
  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. }
  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. }
  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>
  15. $(document).ready(function () {
  17. var myViewModel =
  19. {
  21. showImage: ko.observable(false)
  23. };
  25. $('#showLogo').click(function () {
  27. myViewModel.showImage(true);
  29. });
  31. $('#hideLogo').click(function () {
  33. myViewModel.showImage(false);
  35. });
  37. ko.applyBindings(myViewModel);
  39. })
  42. ko.applyBindings(imageViewModel);
  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: