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

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

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

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 text binding causes the associated DOM element to display the text value of your parameter. Typically this is useful with elements like <span> or <em> that traditionally display text, but technically you can use it with any element. Example Today's message is: <span data-bind="text: myMessage"></span> <script type="text/javascript"> var viewModel = { myMessage: ko.observable() // Initially blank }; viewModel.myMessage("Hello, world!

Purpose The with binding creates a new binding context, so that descendant elements are bound in the context of a specified object. Of course, you can arbitrarily nest with bindings along with the other control-flow bindings such as if and foreach. Example 1 Here is a very basic example of switching the binding context to a child object. Notice that in the data-bind attributes, it is not necessary to prefix latitude or longitude with coords., because the binding context is switched to coords. &

Components are a powerful, clean way of organizing your UI code into self-contained, reusable chunks. They: …can represent individual controls/widgets, or entire sections of your application …contain their own view, and usually (but optionally) their own viewmodel …can either be preloaded, or loaded asynchronously (on demand) via AMD or other module systems …can receive parameters, and optionally write back changes to them or invoke callbacks …can be composed together (nested) or inherited from

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.

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 click binding adds an event handler so that your chosen JavaScript function will be invoked when the associated DOM element is clicked. This is most commonly used with elements like button, input, and a, but actually works with any visible DOM element. Example <div> You've clicked <span data-bind="text: numberOfClicks"></span> times <button data-bind="click: incrementClickCounter">Click me</button> </div> <script type="text/javascript"