Knockout built-in Bindings Quick Reference

You can learn about Knockout by using the link Knockout Documentation. There is a pretty good guide about Knockout. In this article, I am going to share a handy and a really concise quick reference about the binding with syntax in Knockout.

Controlling text and appearance bindings

Binding

Description

visible

The visible binding allows you to show or hide an element based on a value passed to it.

 <div data-bind="visible: hasError">An error has occurred</div>

Text

The text binding populates the content of the element with the value passed to it.

 <div data-bind="text: message"></div>

html

The html binding populates the children of this element with the markup passed to it.

 <div data-bind="html: markup"></div>

Css

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

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

style

The style binding adds style values to the element.

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

Attr

The attr binding sets the value of one or more attributes on the element.

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

Form field bindings

Binding

Description

Click

The click binding executes a handler when the element is clicked.

<button data-bind="click: addItem">Add Item</button>

Event

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

<div data-bind="event: { mouseover: showHelp, mouseout: hideHelp }">content</div>

Submit

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

<form data-bind="submit: saveData">…</form>

Value

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

<input data-bind="value: name" />

Enable

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

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

Disable

The disable binding provides the same functionality as the enable binding, but uses the opposite of the passed value.

<input 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.

<input data-bind="hasfocus: nameFocused, value: name" />

Checked

The checkbox binding is used 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 array it can track all of the currently checked values.

<input type="checkbox" data-bind="checked: isActive" />

Options

The options binding is used to populate the options of a select element. It includes optionsText, optionsValue, and optionsCaption options that customize the way that the value is displayed and stored.

<select data-bind="options: choices, value: name"></select>

selectedOptions

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

<select data-bind="options: availableFilters, selectedOptions: selectedFilters" size="10" multiple="true"></select>

Control flow and templating bindings

Binding

Description

If

The if binding determines if the element’s children are rendered and bound. It takes a copy of the child element to use as a template for handling when the bound value changes.

<div data-bind="if: detailsLoaded">
 <div data-bind="text: content"></div>
 </div>

ifnot

The ifnot binding provides the same functionality as the if binding, but uses the opposite of the value passed to it to determine if the element’s should be rendered and bound.

<div data-bind="ifnot: hideDetails">
 <div data-bind="text: content"></div>
 </div>

with

The with binding will bind the child elements using the value passed to it as the data context. It will not render the children if the value is null/undefined/false. It will also retain a copy of the child elements to use as a template for handling when the bound value changes.

<div data-bind="with: details">
 <div data-bind="text: title"></div>
 <div data-bind="text: content"></div>
 </div>

foreach

The foreach binding will use the child elements as a template to repeat for each item in the array passed to it.

<ul data-bind="foreach: items">
 <li data-bind="text: name"></li>
 </ul>

template

The template binding provides the underlying functionality for the if, ifnot, with, and foreach bindings, but also allows you to supply a named template that you can reuse multiple times. named template.

<!—just passing a named template -->
 <div data-bind="template: 'itemsTmpl'"></div>
 <script id="itemTmpl" type="text/html">
 <div data-bind="text: name"></div>
 </script>
 <!—controlling the data that is bound by the template -->
 <div data-bind="template: { name: 'itemTmpl', data: currentItem }"></div>
 <!—iterating through an array of items -->
 <div data-bind="template: { name: 'itemTmpl', foreach: items }"></div>
 

I hope you will enjoy the syntax while working with knockout. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.