KnockoutJS - Declarative Bindings

Declarative binding in KnockoutJS provides a powerful way to connect data to UI.
It is important to understand relationship between bindings and Observables. Technically these two are different. You can use normal JavaScript object as ViewModel and KnockoutJS can process View's binding correctly. Without Observable the property from UI will be processed only for the first time. In this case it cannot update automatically based on underlying data update. To achieve this, bindings must be referred to Observable properties.

Binding Syntax:

The binding consist of 2 items, the binding name and value. Following is a simple example:

Today is : <span data-bind="text: whatDay"></span>

Here text is binding name and whatDay is binding value. You can have multiple bindings separated by comma, as shown below:

Your name: <input data-bind="value: yourName, valueUpdate: 'afterkeydown'" />

Here value is updated after each key is pressed.

Binding Values

The binding value can be a single value, literal, a variable or can be a JavaScript expression. If binding refers to some invalid expression or reference, then KO will output an error and stop processing the binding.
Below are few of the examples of bindings

<!-- simple text binding -->
   <p>Enter employee name: <input data-bind='value: empName' /></p>

<!-- click binding, call a specific function -->
   <button data-bind="click: sortEmpArray">Sort Array</button>

<!-- options binding -->
   <select multiple="true" size="8" data-bind="options: empArray , selectedOptions: chosenItem"> </select>

Following are few points to be noted:

• White spaces does not make any difference.
• Starting from KO 3.0 you can skip binding value which will give binding an undefined value.

The Binding Context

The data that is being used in current bindings can be referenced by an object. This object is called binding context.
Context hierarchy is created and managed by KnockoutJS automatically. Following table lists different types of binding contexts provided by KO:

S.N.	Binding Context Types & Description
1	$root This always refers to top level ViewModel. This makes it possible to access top level methods for manipulating ViewModel. This is usually the object which is passed to ko.applyBindings.
2	$data This property is lot like this keyword in Javascript object. $data property in a binding context refers to ViewModel object for the current context.
3	$index This property contains index of a current item of an array inside a foreach loop. The value of $index will change automatically as and when underlying Observable array is updated. Obviously this context is available only for foreach bindings.
4	$parent This property refers to parent ViewModel object. This is useful when you want to access outer ViewModel properties from inside of a nested loop.
5	$parentContext The context object which is bound at the parent level is called $parentContext. This is different from $parent. $parent refers to data. But $parentContext refers to binding context. E.g. you might need to access the index of outer foreach item from an inner context.
6	$rawdata This context holds raw ViewModel value in the current situation. This resembles $data but the difference is that, if ViewModel is wrapped in Observable then $data becomes just unwrapped ViewModel and $rawdata becomes actual Observable data.
7	$component This context is used to refer to ViewModel of that component, when you are inside a particular component. E.g. you might want to access some property from ViewModel instead of current data in the template section of component.
8	$componentTemplateNodes This represents an array of DOM nodes passed to that particular component when you are within a specific component template.

Following terms are also available in binding but are not actually binding context:

• $context : This is nothing but existing binding context object.
• $element: This object refers to element in DOM in the current binding.

Working with text and appearances

Below is list of binding types provided by KO to deal with text and visual appearances.

S.N.	Binding Type & Usage
1	visible: <binding-condition> To show or hide HTML DOM element depending on certain conditions.
2	text: <binding-value> To set the content of an HTML DOM element.
3	html: <binding-value> To set the HTML markup contents of a DOM element.
4	css: <binding-object> To apply CSS classes to an element.
5	style: <binding-object> To define the inline style attribute of an element.
6	attr: <binding-object> To add attributes to an element dynamically.

Working with control flow Bindings

Below is list of Control Flow Binding types provided by KO.

S.No.	Binding Type & Usage
1	foreach: <binding-array> In this binding each array item is referenced in HTML markup in a loop.
2	if: <binding-condition> If the condition is true then given HTML markup will be processed else it will be removed from DOM.
3	ifnot: <binding-condition> Negation of If. If the condition is true then given HTML markup will be processed else it will be removed from DOM.
4	with: <binding-object> This binding is used to bind child elements of an object in the specified object's context.
5	component: <component-name> OR component: <component-object> This binding is used to insert a component into DOM elements and pass parameters optionally.

Working with Form Fields Bindings

Below is list of Form Fields Binding types provided by KO.

S.No.	Binding Type & Usage
1	click: <binding-function> This binding is used to invoke a Javascript function associated with a DOM element based on a click.
2	event: <DOM-event: handler-function> This binding is used to listen to specified DOM events and call associated handler functions based on them.
3	submit: <binding-function> This binding is used to invoke a Javascript function when the associated DOM element is submitted.
4	enable: <binding-value> This binding is used to enable certain DOM element based on specified condition.
5	disable: <binding-value> This binding just disables the associated DOM element when the parameter evaluates to true.
6	value: <binding-value> This binding is used to link respective DOM element's value into ViewModel property.
7	textInput: <binding-value> This binding is used to create 2 ways binding between text box or textarea and ViewModel property.
8	hasFocus: <binding-value> This binding is used to manually set the focus of a HTML DOM element through a ViewModel property.
9	checked: <binding-value> This binding is used to create a link between a checkable form element and ViewModel property.
10	options: <binding-array> This binding is used to define options for a select element.
11	selectedOptions: <binding-array> This binding is used to work with elements which are selected currently in multi list select form control.
12	uniqueName: <binding-value> This binding is used to generate a unique name for a DOM element.