- KnockoutJS Tutorial
- KnockoutJS - Home
- KnockoutJS - Overview
- KnockoutJS - Environment Setup
- KnockoutJS - Application
- KnockoutJS - MVVM Framework
- KnockoutJS - Observables
- Computed Observables
- KnockoutJS - Declarative Bindings
- KnockoutJS - Dependency Tracking
- KnockoutJS - Templating
- KnockoutJS - Components
- KnockoutJS Resources
- KnockoutJS - Quick Guide
- KnockoutJS - Resources
- KnockoutJS - Discussion
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
KnockoutJS - Declarative Bindings
Declarative binding in KnockoutJS provides a powerful way to connect data to UI.
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.
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.
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.
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|
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.
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.
This property refers to parent ViewModel object. This is useful when you want to access outer ViewModel properties from inside of a nested loop.
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.
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.
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.
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|
To show or hide HTML DOM element depending on certain conditions.
To set the content of an HTML DOM element.
To set the HTML markup contents of a DOM element.
To apply CSS classes to an element.
To define the inline style attribute of an element.
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|
In this binding, each array item is referenced in HTML markup in a loop.
If the condition is true, then the given HTML markup will be processed. Else, it will be removed from DOM.
Negation of If. If the condition is true, then the given HTML markup will be processed. Else, it will be removed from DOM.
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|
|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.
This binding is used to enable certain DOM elements based on a specified condition.
This binding disables the associated DOM element when the parameter evaluates to true.
This binding is used to link respective DOM element's value into ViewModel property.
This binding is used to create 2-way binding between text box or textarea and ViewModel property.
This binding is used to manually set the focus of a HTML DOM element through a ViewModel property.
This binding is used to create a link between a checkable form element and ViewModel property.
This binding is used to define the options for a select element.
This binding is used to work with elements which are selected currently in multi list select form control.
This binding is used to generate a unique name for a DOM element.