Dhananjay Kumar

Setting up Visual Studio 2013 for Knockoutjs Development

Create your First MVVM based JavaScript App in two simple steps using Knockoutjs

In simpler terms we can define Knockoutjs binding as a mechanism to establish relationship between view and ViewModel. View takes user action and pass the instruction to ViewModel. One of the most popular example of this could be clicking on a button or selection of an item on the View by user. After each action of user, view got the task to instruct ViewModel about the same. This is done through the BINDING. On the other hand we can define binding as manipulating DOM elements and their appearance on the basis of ViewModel properties. Binding establish the relationship between View and ViewModel.

KO Bindings can be categorized in various categories,

• Controlling Text and Appearance
• Controlling Flow
• Controlling User Actions like Click, Submit etc.

If required you can create Custom Binding as well. In this post we will focus on bindings which control text and appearance. Those bindings are as follows,

Now one by one let us take a look on different text control and appearance binding.

Visible binding

You use visible binding to find when an element on DOM should be visible or when it should not be. This binding is very simple to use.

Let us say you have a ViewModel as below,

var viewModel = {

display: ko.observable(false)

};

You can use visible binding on view as below,

<div data-bind="visible: display">
 <h2>hey I am visible through visible binding </h2>
 </div>

Some points about visible binding is worth discussing here, If value of ViewModel property will resolved to following values then bind DOM element view property will be set to block.

• Null
• undefined
• number zero
• Boolean false

For DOM elements if ViewModel property value is yielding to false then visible binding will always have more priority than CSS attributes.

Text binding

You use text binding to display a text on View. You can do text binding with elements like

• <h1>,<h2>
• <em>
• <span>
• <input>
• Practically you can do text binding with any element on View.

Let us suppose you have ViewModel as below,

var viewModel = {

message : "hey welcome to KO "

};

You can do text binding on View as below,

<div>
 <h2 data-bind="text : message"></h2>
 </div>

If ViewModel property contains a HTML encoded value and you bind that property on View using text binding.

var viewModel = {

message: "hey welcome to KO ",
 messagehtml:"<i>hello there</i>"

};

binding is done as below ,

<div>
 <h2 data-bind="text : message"></h2>
 <span data-bind="text: messagehtml"></span>
 </div>

You will get output HTML encoded value as plain text. It will not get rendered. You will get ouput as below,

In text binding

• All the previous value of the Element on View will be overwritten
• If ViewModel property contains any value than string or number then in text binding that value will get displayed as value.toString()

HTML binding

You use HTML binding to set InnerHtml property of View’s Elements. So let us take a ViewModel with property value encoded HTML value.

var viewModel = {

message: "hey welcome to KO ",
 messagehtml:"<h1>hello there</h1>"

};

html binding can be done as following ,

<div>
 <h4 data-bind="text : message"></h4>
 <span data-bind="html: messagehtml"></span>
 </div>

Now View will render html from ViewModel. Html binding always set innerHtml attribute of Element and text binding set innerText property. You should be cognizant using html binding because it may cause potential injection of script on the view.

CSS binding

You use CSS binding to apply CSS class to elements on View. Let us say you have a CSS class defined as below,

.red
{
 color:red

}

You want to apply red background to div on a condition from ViewModel property. Let us assume we have a ViewModel as following,

var viewModel = {

message: "hey welcome to KO ",
 messagehtml: "<h1>hello there</h1>",
 warningmessage : false

};

Let us assume that we want to apply red class from CSS on basis of warningmessage property of view. We can do css binding as below,

<div data-bind="css: {red : warningmessage}">
 hello world
 </div>

Let us see that how can we work with dynamic classes in CSS binding. Assume that we have following classes,

.red
{
 color:red

}
.blue
{
 color:blue
}
.green{
 color : green
}

We need to dynamically bind one of these classes to element on View. Suppose we have ViewModel as below,

var viewModel = {

message: "hey welcome to KO ",
 messagehtml: "<h1>hello there</h1>",
 messagelevel : 10

};

On basis of ViewModel property messagelevel we need to apply a css class dynamically. To do this a computed observable is required. Computed observable will return css class.

viewModel.colorMessage = ko.computed(function () {

if (this.messagelevel > 0)
 {
 return 'green';
 }
 else if(this.messagelevel <0)
 {
 return 'red';
 }
 else if(this.messagelevel==0)
 {
 return 'blue';
 }

}, viewModel);

And CSS binding at View can be done as follows,

<div>
 <div data-bind="css: colorMessage,
 html: messagehtml">

 </div>

 </div>

In this post we learn various binding which help to control text and appearance of elements. I hope you find this post useful. Thanks for reading.