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

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

Purpose The enable binding causes the associated DOM element to be enabled only when the parameter value is true. This is useful with form elements like input, select, and textarea. Example <p> <input type='checkbox' data-bind="checked: hasCellphone" /> I have a cellphone </p> <p> Your cellphone number: <input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone" /> </p> <script type="text/javascript"> var viewModel =

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

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

Note: This rate-limit API was added in Knockout 3.1.0. For previous versions, the throttle extender provides similar functionality. Normally, an observable that is changed notifies its subscribers immediately, so that any computed observables or bindings that depend on the observable are updated synchronously. The rateLimit extender, however, causes an observable to suppress and delay change notifications for a specified period of time. A rate-limited observable therefore updates dependencies a

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

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