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>

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

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

Pure computed observables, introduced in Knockout 3.2.0, provide performance and memory benefits over regular computed observables for most applications. This is because a pure computed observable doesn’t maintain subscriptions to its dependencies when it has no subscribers itself. This feature: Prevents memory leaks from computed observables that are no longer referenced in an application but whose dependencies still exist. Reduces computation overhead by not re-calculating computed observab

Purpose The options binding controls what options should appear in a drop-down list (i.e., a <select> element) or multi-select list (e.g., <select size='6'>). This binding cannot be used with anything other than <select> elements. The value you assign should be an array (or observable array). The <select> element will then display one item for each item in your array. Note: For a multi-select list, to set which of the options are selected, or to read which of the options

A binding context is an object that holds data that you can reference from your bindings. While applying bindings, Knockout automatically creates and manages a hierarchy of binding contexts. The root level of the hierarchy refers to the viewModel parameter you supplied to ko.applyBindings(viewModel). Then, each time you use a control flow binding such as with or foreach, that creates a child binding context that refers to the nested view model data. Bindings contexts offer the following special

Overview of AMD Excerpt From Writing Modular JavaScript With AMD, CommonJs & ES Harmony: When we say an application is modular, we generally mean it’s composed of a set of highly decoupled, distinct pieces of functionality stored in modules. As you probably know, loose coupling facilitates easier maintainability of apps by removing dependencies where possible. When this is implemented efficiently, its quite easy to see how changes to one part of a system may affect another. Unlike some mor

Note: This documentation applies to Knockout 3.4.0 and later. ko.onError Knockout wraps internal asynchronous calls and looks for an optional ko.onError callback to execute, if an exception is encountered, before throwing the original error. This gives you the opportunity to run custom logic, such as passing the error to a logging module. Additionally, since the original call is wrapped in a try/catch, the error passed to ko.onError contains a stack property, which is not true in many browsers

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