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

Purpose The submit binding adds an event handler so that your chosen JavaScript function will be invoked when the associated DOM element is submitted. Typically you will only want to use this on form elements. When you use the submit binding on a form, Knockout will prevent the browser’s default submit action for that form. In other words, the browser will call your handler function but will not submit the form to the server. This is a useful default because when you use the submit binding, it’

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

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

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