Canarys | IT Services


Part 2 of KnockOut.js in Asp.Net


Computed Observables:

                                            Functions which are dependent on one or more observables and will automatically update whenever any of the dependencies altered.

Eg: If we want to display full name based on first name and last name then

Step 1: Declare view model

 function AppViewModel() {

 this.firstName = ko.observable(‘Naresh’);

  this.lastName = ko.observable('Reddy');

Step 2: Define Computed observable.

function AppViewModel () {this.fullName = ko.computed(function() { return this.firstName() + " " + this.lastName(); }, this);}

Step 3: Bind View Model to UI elements

The name is 

Bindings in KO:


The visible binding allows DOM element to show or hide an element based on a value passed to it.

 data-bind="visible: hasError">An error has occurred



The text binding allows DOM element to display text value of parameter passed.

 data-bind="text: firstname">



The html binding allows DOM element to display Html of parameter passed.

 data-bind="html: samplehtml">



The css binding toggles one or more CSS classes on the associated DOM element.

 data-bind="css: {error: hasError, required: isRequired }">content



The style binding adds style values to the associated DOM element.

 data-bind="style: {color: messageColor, backgroundColor: backColor }">content



The attr binding sets the value of one or more attributes for the associated DOM element.

 data-bind="attr: { title: itemDescription, id: itemId }">content



The click binding adds an event handler and will fire whenever associated DOM element clicked.

 data-bind="click: GetData">Add Item



The event binding adds handlers to the associated DOM element for the specified events.

 data-bind="event: { mouseover: showHover, mouseout: hideHover }">content



The submit binding allows us to execute a handler when a form is submitted.

 data-bind="submit: saveStudent">



The value binding enables two-way binding of the form field’s value to a view model value.

 data-bind="value: name" />



The enable binding controls whether the form element is enabled passed on the passed value.

 data-bind="enable: isEditable, value: name" />



The disable binding is similar to enable binding, but works opposite of the passed value.

 data-bind="disable: isReadOnly, value: name" />



The hasfocus binding tracks the focus state of the element and attempts to give the field focus when the value is set to true.

 data-bind="hasfocus: nameFocused, value: name" />



The checkbox binding causes to bind against radio buttons or checkboxes. This can track true or false whether a checkbox is checked, the value of the currently selected radio button, or when bound against an observable array it can track all of the currently checked values.

 type="checkbox" data-bind="checked: isActive" />



The options binding causes to populate the options of a select element. It includes optionsText, optionsValue, and optionsCaption options that customizes the way that the value is displayed and stored.

 data-bind="options: countries, value: name">



The selectedOptions binding tracks the currently selected items for a select element that allows multiple selections.

 data-bind="options: countries, selectedOptions: selectedCountries"/>



The if binding determines if the element’s children are rendered.

 data-bind="if: students">
 data-bind="text: name">



The ifnot binding similar to if binding, but works the opposite of the value passed to it to determine if the element’s should be rendered.

 data-bind="ifnot: students">
 data-bind="text: name">



The with binding will bind the child elements using the value passed to it as the data context.

 data-bind="with: students">
 data-bind="text: name">
 data-bind="text: address">



The foreach binding will use the child elements as a template to repeat for each item in the array passed to it.

 data-bind="foreach: items">
 data-bind="text: name">



The template binding provides the associated DOM element with the result of rendering a template. It simply acts as building UI

Two types:

1. Native templating binds to if, for, foreach, with binding

2. String based templating bind to 3rd party template engines like JQuery tmpl


 data-bind="template: 'studentsTmpl'">
 id="stundentTmpl" type="text/html">
"text: name">
 data-bind="template: { name: 'studentTmpl', data: student }">  data-bind="template: { name: 'stundentTmpl', foreach: students }">


Leave a Reply

Your email address will not be published. Required fields are marked *

Reach Us

With Canarys,
Let’s Plan. Grow. Strive. Succeed.