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 enable binding causes the associated DOM element to be enabled only when the parameter value is true. This is useful with form elements like input, select, and textarea. Example <p> <input type='checkbox' data-bind="checked: hasCellphone" /> I have a cellphone </p> <p> Your cellphone number: <input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone" /> </p> <script type="text/javascript"> var viewModel =

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.

In a typical Knockout application, DOM elements are dynamically added and removed, for example using the template binding or via control-flow bindings (if, ifnot, with, and foreach). When creating a custom binding, it is often desirable to add clean-up logic that runs when an element associated with your custom binding is removed by Knockout. Registering a callback on the disposal of an element To register a function to run when a node is removed, you can call ko.utils.domNodeDisposal.addDispos

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

Knockout’s declarative binding system provides a concise and powerful way to link data to the UI. It’s generally easy and obvious to bind to simple data properties or to use a single binding. For more complex bindings, it helps to better understand the behavior and syntax of Knockout’s binding system. Binding syntax A binding consists of two items, the binding name and value, separated by a colon. Here is an example of a single, simple binding: Today's message is: <span data-bind="text: myMe

Custom elements provide a convenient way of injecting components into your views. Introduction Example Passing parameters Communication between parent and child components Passing observable expressions Passing markup into components Controlling custom element tag names Registering custom elements Note: Combining custom elements with regular bindings Note: Custom elements cannot be self-closing Note: Custom elements and Internet Explorer 6 to 8 Advanced: Accessing $raw parameters Introducti

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

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

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