Inbuilt Bindings in Knockout.js: Controlling Text and Appearance

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.

image

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,

clip_image002

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.

image

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,

clip_image001

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.

JavaScript Functions is a Statement or Expression?

Answer of above question is JavaScript functions can be used either as statement or expression. JavaScript functions can be treated in different ways. They can be

  • Expression
  • Passed as value
  • Returned as value
  • Statement

Functions in JavaScript can be Expression or Statement. Problem is in both flavour they look exactly same.

So a function statement is

clip_image001

This can be also written as below. Here we are assigning function as expression to a variable.

clip_image002

Function statement are always hoisted to the scope it is defined. So you do not need to define a function before using it. Consider following example,

clip_image003

In above function statement, we are using function before it is defined. You will get expected result.

Now let us make function as expression,

clip_image004

Above lines of code will throw you exception that funct1() is undefined. So function as expression does not get hoist to its scope.

clip_image006

JavaScript function can be used in if statement as well,

clip_image007

You will get following output,

clip_image008

If you change return of function to 0 then if statement would not get executed,

clip_image009

Apart from this JavaScript function can be treated as value as well. JavaScript functions act as Value. They can

  • JavaScript function can be assigned to a variable
  • JavaScript function can set as property of an Object
  • JavaScript function can be passed as argument to other function
  • JavaScript function can be returned from function etc…

You can assign function as Object property. This can be done as following,

clip_image001[6]

You see that above we assigned a JavaScript function as Object’s Property. You can use JavaScript function as argument of another function. This can be done as below,

clip_image002[6]

So we learnt in this post that a JavaScript function can be used either as statement and expression. I hope you find this post useful. Thanks for reading.