Purpose The ifnot binding is exactly the same as the if binding, except that it inverts the result of whatever expression you pass to it. For more details, see documentation for the if binding. Note: “ifnot” is the same as a negated “if” The following markup: <div data-bind="ifnot: someProperty">...</div> … is equivalent to the following: <div data-bind="if: !someProperty()">...</div> … assuming that someProperty is observable and hence you need to invoke it as a funct

Purpose The html binding causes the associated DOM element to display the HTML specified by your parameter. Typically this is useful when values in your view model are actually strings of HTML markup that you want to render. Example <div data-bind="html: details"></div> <script type="text/javascript"> var viewModel = { details: ko.observable() // Initially blank }; viewModel.details("<em>For further details, view the report <a href='report.html'>here

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 with binding creates a new binding context, so that descendant elements are bound in the context of a specified object. Of course, you can arbitrarily nest with bindings along with the other control-flow bindings such as if and foreach. Example 1 Here is a very basic example of switching the binding context to a child object. Notice that in the data-bind attributes, it is not necessary to prefix latitude or longitude with coords., because the binding context is switched to coords. &

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

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

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

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