You’re not limited to using the built-in bindings like click, value, and so on — you can create your own ones. This is how to control how observables interact with DOM elements, and gives you a lot of flexibility to encapsulate sophisticated behaviors in an easy-to-reuse way. For example, you can create interactive components like grids, tabsets, and so on, in the form of custom bindings (see the grid example). Registering your binding To register a binding, add it as a subproperty of ko.bindin

For Knockout to be able to load and instantiate your components, you must register them using ko.components.register, providing a configuration as described here. Note: As an alternative, it’s possible to implement a custom component loader that fetches components by your own conventions instead of explicit configuration. Registering components as a viewmodel/template pair Specifying a viewmodel A constructor function A shared object instance A createViewModel factory function An AMD module w

Components are a powerful, clean way of organizing your UI code into self-contained, reusable chunks. They: …can represent individual controls/widgets, or entire sections of your application …contain their own view, and usually (but optionally) their own viewmodel …can either be preloaded, or loaded asynchronously (on demand) via AMD or other module systems …can receive parameters, and optionally write back changes to them or invoke callbacks …can be composed together (nested) or inherited from

Purpose The click binding adds an event handler so that your chosen JavaScript function will be invoked when the associated DOM element is clicked. This is most commonly used with elements like button, input, and a, but actually works with any visible DOM element. Example <div> You've clicked <span data-bind="text: numberOfClicks"></span> times <button data-bind="click: incrementClickCounter">Click me</button> </div> <script type="text/javascript"

The component binding injects a specified component into an element, and optionally passes parameters to it. Live example API Component lifecycle Note: Template-only components Note: Using component without a container element Note: Passing markup to components Disposal and memory management Live example Live examples are not available on DevDocs, sorry. Source code: View <h4>First instance, without parameters</h4> <div data-bind='component: "message-editor"'></d

Whenever you inject a component using the component binding or a custom element, Knockout fetches that component’s template and viewmodel using one or more component loaders. The job of a component loader is to asynchronously supply a template/viewmodel pair for any given component name. The default component loader Component loader utility functions Implementing a custom component loader Functions you can implement getConfig(name, callback) loadComponent(name, componentConfig, callback) load

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

A binding context is an object that holds data that you can reference from your bindings. While applying bindings, Knockout automatically creates and manages a hierarchy of binding contexts. The root level of the hierarchy refers to the viewModel parameter you supplied to ko.applyBindings(viewModel). Then, each time you use a control flow binding such as with or foreach, that creates a child binding context that refers to the nested view model data. Bindings contexts offer the following special

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