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

What if you’ve got an observable for firstName, and another for lastName, and you want to display the full name? That’s where computed observables come in - these are functions that are dependent on one or more other observables, and will automatically update whenever any of these dependencies change. For example, given the following view model class, function AppViewModel() { this.firstName = ko.observable('Bob'); this.lastName = ko.observable('Smith'); } … you could add a computed ob

Knockout is designed to allow you to use arbitrary JavaScript objects as view models. As long as some of your view model’s properties are observables, you can use KO to bind to them to your UI, and the UI will be updated automatically whenever the observable properties change. Most applications need to fetch data from a backend server. Since the server doesn’t have any concept of observables, it will just supply a plain JavaScript object (usually serialized as JSON). The mapping plugin gives y

Pure computed observables, introduced in Knockout 3.2.0, provide performance and memory benefits over regular computed observables for most applications. This is because a pure computed observable doesn’t maintain subscriptions to its dependencies when it has no subscribers itself. This feature: Prevents memory leaks from computed observables that are no longer referenced in an application but whose dependencies still exist. Reduces computation overhead by not re-calculating computed observab

Purpose The options binding controls what options should appear in a drop-down list (i.e., a <select> element) or multi-select list (e.g., <select size='6'>). This binding cannot be used with anything other than <select> elements. The value you assign should be an array (or observable array). The <select> element will then display one item for each item in your array. Note: For a multi-select list, to set which of the options are selected, or to read which of the options

Note: This rate-limit API was added in Knockout 3.1.0. For previous versions, the throttle extender provides similar functionality. Normally, an observable that is changed notifies its subscribers immediately, so that any computed observables or bindings that depend on the observable are updated synchronously. The rateLimit extender, however, causes an observable to suppress and delay change notifications for a specified period of time. A rate-limited observable therefore updates dependencies a

Purpose The textInput binding links a text box (<input>) or text area (<textarea>) with a viewmodel property, providing two-way updates between the viewmodel property and the element’s value. Unlike the value binding, textInput provides instant updates from the DOM for all types of user input, including autocomplete, drag-and-drop, and clipboard events. Example <p>Login name: <input data-bind="textInput: userName" /></p> <p>Password: <input type="password"

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

Purpose The visible binding causes the associated DOM element to become hidden or visible according to the value you pass to the binding. Example <div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value. </div> <script type="text/javascript"> var viewModel = { shouldShowMessage: ko.observable(true) // Message initially visible }; viewModel.shouldShowMessage(false); // ... now it's hidden view

Purpose The template binding populates the associated DOM element with the results of rendering a template. Templates are a simple and convenient way to build sophisticated UI structures - possibly with repeating or nested blocks - as a function of your view model data. There are two main ways of using templates: Native templating is the mechanism that underpins foreach, if, with, and other control flow bindings. Internally, those control flow bindings capture the HTML markup contained in your