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.
Working with Text and Appearances
Following is a list of binding types provided by KO to deal with text and visual appearances.
Working with Control Flow Bindings
Following is a list of Control Flow Binding types provided by KO.
Working with Form Fields Bindings
Following is the list of Form Fields Binding types provided by KO.
