Purpose The hasFocus binding links a DOM element’s focus state with a viewmodel property. It is a two-way binding, so: If you set the viewmodel property to true or false, the associated element will become focused or unfocused. If the user manually focuses or unfocuses the associated element, the viewmodel property will be set to true or false accordingly. This is useful if you’re building sophisticated forms in which editable elements appear dynamically, and you would like to control where t

Beginners don’t need to know about this, but more advanced developers will want to know why we keep making all these claims about KO automatically tracking dependencies and updating the right parts of the UI… It’s actually very simple and rather lovely. The tracking algorithm goes like this: Whenever you declare a computed observable, KO immediately invokes its evaluator function to get its initial value. While the evaluator function is running, KO sets up a subscription to any observables (inc

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

Knockout allows you to implement sophisticated client-side interactivity, but almost all web applications also need to exchange data with the server, or at least to serialize the data for local storage. The most convenient way to exchange or store data is in JSON format - the format that the majority of Ajax applications use today. Loading or Saving Data Knockout doesn’t force you to use any one particular technique to load or save data. You can use whatever mechanism is a convenient fit for yo

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 foreach binding duplicates a section of markup for each entry in an array, and binds each copy of that markup to the corresponding array item. This is especially useful for rendering lists or tables. Assuming your array is an observable array, whenever you later add, remove, or re-order array entries, the binding will efficiently update the UI to match - inserting or removing more copies of the markup, or re-ordering existing DOM elements, without affecting any other DOM elements. T

In most cases, data-bind attributes provide a clean and succinct way to bind to a view model. However, event handling is one area that can often result in verbose data-bind attributes, as anonymous functions were typically the recommended techinique to pass arguments. For example: <a href="#" data-bind="click: function() { viewModel.items.remove($data); }"> remove </a> As an alternative, Knockout provides two helper functions that allow you to identify the data associated with

Knockout observables provide the basic features necessary to support reading/writing values and notifying subscribers when that value changes. In some cases, though, you may wish to add additional functionality to an observable. This might include adding additional properties to the observable or intercepting writes by placing a writable computed observable in front of the observable. Knockout extenders provide an easy and flexible way to do this type of augmentation to an observable. How to cr

Purpose The event binding allows you to add an event handler for a specified event so that your chosen JavaScript function will be invoked when that event is triggered for the associated DOM element. This can be used to bind to any event, such as keypress, mouseover or mouseout. Example <div> <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"> Mouse over me </div> <div data-bind="visible: detailsEnabled"> Details

Note: This is an advanced technique, typically used only when creating libraries of reusable bindings. It’s not something you’ll normally need to do when building applications with Knockout. By default, bindings only affect the element to which they are applied. But what if you want to affect all descendant elements too? This is possible. Your binding can tell Knockout not to bind descendants at all, and then your custom binding can do whatever it likes to bind them in a different way. To do th