Purpose The checked binding links a checkable form control — i.e., a checkbox (<input type='checkbox'>) or a radio button (<input type='radio'>) — with a property on your view model. When the user checks the associated form control, this updates the value on your view model. Likewise, when you update the value in your view model, this checks or unchecks the form control on screen. Note: For text boxes, drop-down lists, and all non-checkable form controls, use the value binding to re

Purpose The with binding creates a new binding context, so that descendant elements are bound in the context of a specified object. Of course, you can arbitrarily nest with bindings along with the other control-flow bindings such as if and foreach. Example 1 Here is a very basic example of switching the binding context to a child object. Notice that in the data-bind attributes, it is not necessary to prefix latitude or longitude with coords., because the binding context is switched to coords. &

Purpose The attr binding provides a generic way to set the value of any attribute for the associated DOM element. This is useful, for example, when you need to set the title attribute of an element, the src of an img tag, or the href of a link based on values in your view model, with the attribute value being updated automatically whenever the corresponding model property changes. Example <a data-bind="attr: { href: url, title: details }"> Report </a> <script type="text/java

Note: This is an advanced technique, typically used only when creating libraries of reusable bindings. It’s not something you’ll normally need to do when building applications with Knockout. Knockout’s control flow bindings (e.g., if and foreach) can be applied not only to regular DOM elements, but also to “virtual” DOM elements defined by a special comment-based syntax. For example: <ul> <li class="heading">My heading</li> <!-- ko foreach: items --> <

Custom elements provide a convenient way of injecting components into your views. Introduction Example Passing parameters Communication between parent and child components Passing observable expressions Passing markup into components Controlling custom element tag names Registering custom elements Note: Combining custom elements with regular bindings Note: Custom elements cannot be self-closing Note: Custom elements and Internet Explorer 6 to 8 Advanced: Accessing $raw parameters Introducti

Purpose The foreach binding duplicates a section of markup for each entry in an array, and binds each copy of that markup to the corresponding array item. This is especially useful for rendering lists or tables. Assuming your array is an observable array, whenever you later add, remove, or re-order array entries, the binding will efficiently update the UI to match - inserting or removing more copies of the markup, or re-ordering existing DOM elements, without affecting any other DOM elements. T

Purpose The html binding causes the associated DOM element to display the HTML specified by your parameter. Typically this is useful when values in your view model are actually strings of HTML markup that you want to render. Example <div data-bind="html: details"></div> <script type="text/javascript"> var viewModel = { details: ko.observable() // Initially blank }; viewModel.details("<em>For further details, view the report <a href='report.html'>here

Note: This is an advanced technique, typically used only when creating libraries of reusable bindings or extended syntaxes. It’s not something you’ll normally need to do when building applications with Knockout. Starting with Knockout 3.0, developers can define custom syntaxes by providing callbacks that rewrite DOM nodes and binding strings during the binding process. Preprocessing binding strings You can hook into Knockout’s logic for interpreting data-bind attributes by providing a binding p

Beginners may wish to skip this section - writable computed observables are fairly advanced and are not necessary in most situations Normally, computed observables have a value that is computed from other observables and are therefore read-only. What may seem surprising, then, is that it is possible to make computed observables writable. You just need to supply your own callback function that does something sensible with written values. You can use a writable computed observable exactly like a

Knockout allows you to implement sophisticated client-side interactivity, but almost all web applications also need to exchange data with the server, or at least to serialize the data for local storage. The most convenient way to exchange or store data is in JSON format - the format that the majority of Ajax applications use today. Loading or Saving Data Knockout doesn’t force you to use any one particular technique to load or save data. You can use whatever mechanism is a convenient fit for yo