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

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

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

If you want to detect and respond to changes on one object, you’d use observables. If you want to detect and respond to changes of a collection of things, use an observableArray. This is useful in many scenarios where you’re displaying or editing multiple values and need repeated sections of UI to appear and disappear as items are added and removed. Example var myObservableArray = ko.observableArray(); // Initially an empty array myObservableArray.push('Some value'); // Adds the v

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 selectedOptions binding controls which elements in a multi-select list are currently selected. This is intended to be used in conjunction with a <select> element and the options binding. When the user selects or de-selects an item in the multi-select list, this adds or removes the corresponding value to an array on your view model. Likewise, assuming it’s an observable array on your view model, then whenever you add or remove (e.g., via push or splice) items to this array, the

What if you’ve got an observable for firstName, and another for lastName, and you want to display the full name? That’s where computed observables come in - these are functions that are dependent on one or more other observables, and will automatically update whenever any of these dependencies change. For example, given the following view model class, function AppViewModel() { this.firstName = ko.observable('Bob'); this.lastName = ko.observable('Smith'); } … you could add a computed ob

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

Purpose The textInput binding links a text box (<input>) or text area (<textarea>) with a viewmodel property, providing two-way updates between the viewmodel property and the element’s value. Unlike the value binding, textInput provides instant updates from the DOM for all types of user input, including autocomplete, drag-and-drop, and clipboard events. Example <p>Login name: <input data-bind="textInput: userName" /></p> <p>Password: <input type="password"

Purpose The uniqueName binding ensures that the associated DOM element has a nonempty name attribute. If the DOM element did not have a name attribute, this binding gives it one and sets it to some unique string value. You won’t need to use this often. It’s only useful in a few rare cases, e.g.: Other technologies may depend on the assumption that certain elements have names, even though names might be irrelevant when you’re using KO. For example, jQuery Validation currently will only validate