KnockoutJS cheat-sheet

Controlling text and appearance bindings

# Binding Description
1 visible The visible binding allows you to show or hide an element based on a value passed to it.
2 Text The text binding populates the content of the element with the value passed to it.

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

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

5 style The style binding adds style values to the element.

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


Form field bindings

# Binding Description
1 click The click binding executes a handler when the element is clicked.
2 submit The submit binding allows you to execute a handler when a form is submitted.
3 value The value binding enables two-way binding of the field’s value to a view model value.
4 enable The enable binding controls whether the form element is enabled passed on the passed value.
5 disable The hasfocus binding tracks the focus state of the element and attempts to give the field focus when the value is set to true.
6 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.
7 options The options binding is used to populate the options of a select element. It includes optionsText, optionsValue, and optionsCaption options that customise the way that the value is displayed and stored.
8 selectedOptions The selectedOptions binding tracks the currently selected items for a select element that allows multiple selections.


Control flow and templating bindings

# Binding Description I.E.
1 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>

2 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 data-bind="text: content">

< /div>

3 Value The value binding enables two-way binding of the field’s value to a view model value. < input data-bind="value: name" />
4 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">

< /ul>

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

< div data-bind="template: 'itemsTmpl'">

< script id="itemTmpl" type="text/html">
< div data-bind="text: name">

< /script>

< div data-bind="template: { name: 'itemTmpl', data: currentItem }">

< div data-bind="template: { name: 'itemTmpl', foreach: items }">


Example containing all above

One Comment

  • csaba commented on September 21, 2014 Reply

    Atow. this is the only one summary about the available binding options.

    Keep it up.

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *