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:

Visible:

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

 

Text:

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

 data-bind="text: firstname">

 

html:

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

 data-bind="html: samplehtml">

Css:

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

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

Style:

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

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

Attr:

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

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

Click:

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

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

Event:

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

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

Submit:

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

 data-bind="submit: saveStudent">…

Value:

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

 data-bind="value: name" />

Enable:

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

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

Disable:

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

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

Hasfocus:

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

Checked:

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

Options:

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

selectedOptions:

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

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

If:

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

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

Ifnot:

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

With:

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

Foreach:

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

Template:

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 3^rd 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 }">