Part 2 of KnockOut.js in Asp.Net - Blogs

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 }">



Token Based Authentication for Web API's

Securing ASP.NET Web API using Custom Token Based AuthenticationProviding a security to the Web API&...

Read More >

ASP.NET: Audit Trail Implementation using Entity Framework

When you are working with certain projects which involves the Customer records, you might need to tr...

Read More >

Dependency Injection on SignalR


Read More >

Create custom project templates in Visual Studio

Visual studio installation comes with the various predefined project templates, and we can use one o...

Read More >

Introduction on SignalR

Introduction on SignalRReal–Time Web ApplicationThe real-time web is a set of technologies tha...

Read More >

How to upload documents to SharePoint 2013

IntroductionSharePoint is a browser-based collaboration, content management, and extensible platform...

Read More >

Introduction to KnockOut.Js in Asp.Net

What is KnockOut.Js?Knockout.Js (simply KO) is a powerful JavaScript library which allows developers...

Read More >

Introduction to Amazon S3 (Simple Storage Service) and EC2 (Elastic Cloud Computing) in Asp.Net

S3 is an Internet storage engine which has to be designed to make job easier for developers.Develope...

Read More >

How to use Model Binding with ASP.NET Data Controls

IntroductionASP.NET 4.5 provides a flexible alternative to server data controls called as, Model Bin...

Read More >

Using XMPP and Openfire server in ASP.NET C# - Part -2

Roster in XMPPRoster are the contacts of  user (contact list). Roster Handlers in AgsXmppL...

Read More >


Try DevOpSmartBoard Ultimate complete Azure DevOps End-to end reporting tool

Sign Up

  • Recent
  • Popular
  • Tag
Monthly Archive

Contact Us
  • *
  • *