Post
Ask Question

Introduction to Knockout.js - Part Three

Before reading this article, I highly recommend reading the previous part of the series on Knockout.js:

Conceptual Diagram

We have discussed MVVM pattern in previous article.

Conceptual Diagram

Types of Bindings

Controlling Text and Appearance:

  1. Text binding: Display text value passed to the binding.
  2. Value binding: Display any value passed to the binding.
  3. Visible binding: Element will become hidden on visible according to the value passed to the binding. also you can set it TRUE/FALS
  4. CSS binding: Adds or removes named css classes depending on the values passed to the binding.
  5. HTML binding: Display HTML value passed to the binding.
  6. Style binding: Add or remove style values to the DOM element.

What is KO in Knockout.js

KO stands for Knockout and it will be used whenever we use the KnockoutJS library.

How to Applying bindings in Knockout.js

To activate Knockout, add the following line to our <script> block as:

  1. ko.applyBindings(myViewModelName);  
That’s the command that sets the HTML page data-context (XAML term once again). It gets our view-model as a parameter.

Mostly we use applyBindings with only one ViewModel name but you can also specify a DOM node as the second argument.

When passing a DOM node as the second argument, Knockout only binds your ViewModel to that node and its children. A separate ViewModel used for alerts, settings, and current user information.

Important: The ko.applyDataBindings() should come after the HTML content, otherwise it won’t know where to bind the data to.

Demo for text binding & html binding

Step 1: Create one project in Visual Studio 2013 and then create MVC empty application.

Add action method & view for same action method.

By right click on project add KnockOut.js & JavaScript files from Manage Nuget packages. Add knockout.js & JavaScript reference to our view.

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>Index</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 myViewModel = {  
  15.                     myOutput: "welcome to KnockOut.js Part Three",  
  16.                     myHtmlbinding: "  
  17.             <htm>  
  18.                 <body>  
  19.                     <h1 style='color:red'>welcome to C#Corner               </h1>  
  20.                 </body>  
  21.             </html> "  
  22.             };  
  23.             ko.applyBindings(myViewModel);  
  24.         })  
  25.   
  26.         </script>  
  27.     </head>  
  28.     <body>  
  29.         <div> Text Binding   
  30.             <h2 data-bind="text:myOutput"></h2>  
  31.         </div>  
  32.         <br />  
  33.         <div>HTML Binding   
  34.             <h3 data-bind="html:myHtmlbinding"></h3>  
  35.         </div>  
  36.     </body>  
  37. </html>  
Step 2: Run our application.

Output

Demo for style binding

Step 1: Now create another action method in our controller.

Also create view for this same action method.

Now create one folder to add our own style sheet & write some CSS as below:
  1. .orange  
  2. {  
  3.     color: orange;  
  4. }.red  
  5. {  
  6.     color: red;  
  7. }.yellow  
  8. {  
  9.     color: yellow;  
  10. }.banner  
  11. {  
  12.     display: block; - moz - box - sizing: border - box;  
  13.     box - sizing: border - box;  
  14.     background: url(http: //www.c-sharpcorner.com/App_themes/csharp/images/sitelogo.png)no-repeat;  
  15.     width: 150 px; height: 200 px; padding - left: 180 px;  
  16. }  
Step 2: Now 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>Test</title>  
  10.         <script src="~/Scripts/jquery-2.2.0.js"></script>  
  11.         <script src="~/Scripts/knockout-3.4.0.js"></script>  
  12.         <link href="~/css/style.css" rel="stylesheet" />  
  13.         <script>  
  14.             $(document).ready(function () {  
  15.                 var ViewModel = {  
  16.                     age: 20  
  17.                 };  
  18.                 ViewModel.ApplyColor = ko.computed(function () {  
  19.                     if(this.age >10)  
  20.                 {  
  21.                     return 'red';  
  22.                 }  
  23.                 if(this.age==10)  
  24.                 {  
  25.                     return 'orange';  
  26.             }  
  27.             if(this.age <10)  
  28.             {  
  29.                 return 'yellow';  
  30.             }  
  31.         }, ViewModel)  
  32.         ko.applyBindings(ViewModel);  
  33.     })  
  34.   
  35.     </script>  
  36.         </head>  
  37.         <body>  
  38.             <div data-bind="css:ApplyColor">  
  39.                 <h2> This is Rupesh kahane here from Pune.</h2>  
  40.                 <h2>Thanks</h2>  
  41.                 <div>  
  42.                     <img class="banner">  
  43.                     </div>  
  44.                 </div>  
  45.             </body>  
  46.         </html>  
Step 3: Run our application & will see.

Run our application

Now if we change the value of age as 10 then will see our output as.

Run

Summary

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


Similar Articles