Purpose The css binding adds or removes one or more named CSS classes to the associated DOM element. This is useful, for example, to highlight some value in red if it becomes negative. (Note: If you don’t want to apply a CSS class but instead want to assign a style attribute value directly, see the style binding.) Example with static classes <div data-bind="css: { profitWarning: currentProfit() < 0 }"> Profit Information </div> <script type="text/javascript"> var vi

Purpose The text binding causes the associated DOM element to display the text value of your parameter. Typically this is useful with elements like <span> or <em> that traditionally display text, but technically you can use it with any element. Example Today's message is: <span data-bind="text: myMessage"></span> <script type="text/javascript"> var viewModel = { myMessage: ko.observable() // Initially blank }; viewModel.myMessage("Hello, world!

Purpose The disable binding causes the associated DOM element to be disabled only when the parameter value is true. This is useful with form elements like input, select, and textarea. This is the mirror image of the enable binding. For more information, see documentation for the enable binding, because disable works in exactly the same way except that it negates whatever parameter you pass to it.

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.

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

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>

Note: This documentation applies to Knockout 3.4.0 and later. For previous versions, the Deferred Updates plugin provides similar support. In complex applications, with multiple, intertwined dependencies, updating a single observable might trigger a cascade of computed observables, manual subscriptions, and UI binding updates. These updates can be expensive and inefficient if unnecessary intermediate values are pushed to the view or result in extra computed observable evaluations. Even in a sim

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"

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

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