Purpose The style binding adds or removes one or more style values to the associated DOM element. This is useful, for example, to highlight some value in red if it becomes negative, or to set the width of a bar to match a numerical value that changes. (Note: If you don’t want to apply an explicit style value but instead want to assign a CSS class, see the css binding.) Example <div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }"> Profit Information </div>

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

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

Purpose The selectedOptions binding controls which elements in a multi-select list are currently selected. This is intended to be used in conjunction with a <select> element and the options binding. When the user selects or de-selects an item in the multi-select list, this adds or removes the corresponding value to an array on your view model. Likewise, assuming it’s an observable array on your view model, then whenever you add or remove (e.g., via push or splice) items to this array, the

Knockout is built around three core features: Observables and dependency tracking Declarative bindings Templating On this page, you’ll learn about the first of these three. But before that, let’s examine the MVVM pattern and the concept of a view model. MVVM and View Models Model-View-View Model (MVVM) is a design pattern for building user interfaces. It describes how you can keep a potentially sophisticated UI simple by splitting it into three parts: A model: your application’s stored data.

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

If you want to detect and respond to changes on one object, you’d use observables. If you want to detect and respond to changes of a collection of things, use an observableArray. This is useful in many scenarios where you’re displaying or editing multiple values and need repeated sections of UI to appear and disappear as items are added and removed. Example var myObservableArray = ko.observableArray(); // Initially an empty array myObservableArray.push('Some value'); // Adds the v

Note: This documentation applies to Knockout 3.4.0 and later. Knockout’s microtask queue Knockout’s microtask queue supports scheduling tasks to run as soon as possible while still being asynchronous, striving to schedule them to occur before yielding for I/O, reflow, or redrawing. It is used internally for Knockout components to maintain asynchronous behavior, and for scheduling deferred updates for observables. ko.tasks.schedule(function () { // ... }); This will add the provided callbac

Purpose The if binding causes a section of markup to appear in your document (and to have its data-bind attributes applied), only if a specified expression evaluates to true (or a true-ish value such as a non-null object or nonempty string). if plays a similar role to the visible binding. The difference is that, with visible, the contained markup always remains in the DOM and always has its data-bind attributes applied - the visible binding just uses CSS to toggle the container element’s visib