Knockout built-in Bindings Quick Reference

07 Sep 2022

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



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>


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

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


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

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


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

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


The style binding adds style values to the element.

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


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



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

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


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

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


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

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


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

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


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

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


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" />


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" />


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" />


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>


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



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>


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>


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>


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>


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>
 <!—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>
What do you think?

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.

Learn to Crack Your Technical Interview

Accept cookies & close this