Extending observables

Knockout observables provide the basic features necessary to support reading/writing values and notifying subscribers when that value changes. In some cases, though, you may wish to add additional functionality to an observable. This might include adding additional properties to the observable or intercepting writes by placing a writable computed observable in front of the observable. Knockout extenders provide an easy and flexible way to do this type of augmentation to an observable. How to cr

value binding

Purpose The value binding links the associated DOM element’s value with a property on your view model. This is typically useful with form elements such as <input>, <select> and <textarea>. When the user edits the value in the associated form control, it updates the value on your view model. Likewise, when you update the value in your view model, this updates the value of the form control on screen. Note: If you’re working with checkboxes or radio buttons, use the checked bindi

Custom functions

Occasionally, you may find opportunities to streamline your code by attaching new functionality to Knockout’s core value types. You can define custom functions on any of the following types: Because of inheritance, if you attach a function to ko.subscribable, it will be available on all the others too. If you attach a function to ko.observable, it will be inherited by ko.observableArray but not by ko.computed. To attach a custom function, add it to one of the following extensibility points: ko

component binding

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

Descendant bindings

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. By default, bindings only affect the element to which they are applied. But what if you want to affect all descendant elements too? This is possible. Your binding can tell Knockout not to bind descendants at all, and then your custom binding can do whatever it likes to bind them in a different way. To do th

Component loaders

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

JSON data

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

Writable computed observables

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

Binding preprocessing

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

Computed observable reference

The following documentation describes how to construct and work with computed observables. Constructing a computed observable A computed observable can be constructed using one of the following forms: ko.computed( evaluator [, targetObject, options] ) — This form supports the most common case of creating a computed observable. evaluator — A function that is used to evaluate the computed observable’s current value. targetObject — If given, defines the value of this whenever KO invokes your ca