Table of Contents

KnockoutJS – Declarative Bindings

”;

Declarative binding in KnockoutJS provides a powerful way to connect data to UI.

It is important to understand the 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 the UI will be processed only for the first time. In this case, it cannot update automatically based on the underlying data update. To achieve this, bindings must be referred to Observable properties.

Binding Syntax

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

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

Here, text is the binding name and whatDay is the binding value. You can have multiple bindings separated by comma, as shown in the following syntax.

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 the binding refers to some invalid expression or reference, then KO will produce an error and stop processing the binding.

Following are few examples of bindings.

<!-- simple text binding -->
<p>Enter employee name: <input   -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>

Note the following points −

Whitespaces do not make any difference.
Starting from KO 3.0, you can skip the binding value which will give binding an undefined value.

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 the different types of binding contexts provided by KO.

Sr.No.	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 the 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. Whereas, $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, 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 an element in DOM in the current binding.

Working with Text and Appearances

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

Sr.No.	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

Following is a list of Control Flow Binding types provided by KO.

Sr.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 the 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 the given HTML markup will be processed. Else, it will be removed from DOM.
4	with: <binding-object> This binding is used to bind the 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 the parameters optionally.

Working with Form Fields Bindings

Following is the list of Form Fields Binding types provided by KO.

Sr.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 the 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 elements based on a specified condition.
5	disable: <binding-value> This binding 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-way 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 the 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.

Print Page