Purpose The attr binding provides a generic way to set the value of any attribute for the associated DOM element. This is useful, for example, when you need to set the title attribute of an element, the src of an img tag, or the href of a link based on values in your view model, with the attribute value being updated automatically whenever the corresponding model property changes. Example <a data-bind="attr: { href: url, title: details }"> Report </a> <script type="text/java

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 value binding links the associated DOM element’s value with a property on your view model. This is typically useful with form elements such as <input>, <select> and <textarea>. When the user edits the value in the associated form control, it updates the value on your view model. Likewise, when you update the value in your view model, this updates the value of the form control on screen. Note: If you’re working with checkboxes or radio buttons, use the checked bindi

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

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>

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

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

Whenever you inject a component using the component binding or a custom element, Knockout fetches that component’s template and viewmodel using one or more component loaders. The job of a component loader is to asynchronously supply a template/viewmodel pair for any given component name. The default component loader Component loader utility functions Implementing a custom component loader Functions you can implement getConfig(name, callback) loadComponent(name, componentConfig, callback) load

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