Version 3.0.0 beta
Pre-release-
Independent bindings: When an element has more than one binding, such as
visible: showPlaylist, template: 'playlistTmpl'
, each binding is updated in a separate computed observable, and observables accessed by one binding won't affect any others. To receive all the benefits of independent bindings, you should note the following interface changes: (The old interfaces are still supported for backwards compatibility.)- Within binding handlers, access sibling bindings by calling the
get
method of theallBindings
parameter. To check for the existence of a sibling binding, use thehas
method. Getting the value of a sibling binding adds a dependency on any observables accessed in the binding's value expression. ko.applyBindingsToNode
is superseded byko.applyBindingAccessorsToNode
. The second parameter takes an object with pairs of bindings and value-accessors (functions that return the binding value). It can also take a function that returns such an object. (This interface isn't currently documented on the website.)- A binding provider should implement a
getBindingAccessors
function instead of (or in addition to)getBindings
. Similarly to the above, it should return an object with bindings and value-accessors for any nodes that have bindings. (The binding provider interface also isn't documented on the website.)
- Within binding handlers, access sibling bindings by calling the
-
Ordered bindings: When an element has more than one binding, and when the order of updating those bindings is important, such as
value: selectedValue, options: choices
, Knockout will bind them in the right order. This is handled automatically for built-in bindings, and custom bindings can take advantage of this through a new interface. A binding handler can have anafter
property with an array of other bindings that it should come after. For example, thevalue
handler hasafter: ['options', 'foreach']
. -
Preprocessing bindings: Binding handlers can define a
preprocess
function that is called with the code of the binding value before it is evaluated. This can be used to modify the value or add extra bindings based on the value. Suppose you have a binding that expects a string, but you want to allow the user to provide an unquoted string. You could define apreprocess
function that adds quotes to unquoted values:preprocess: function(value) { if (value[0] !== "'" && value[0] !== '"') return '"' + value + '"'; else return value; }
-
Preprocessing nodes: The binding provider can define a
preprocessNode
function that is called with each node in the document before it is processed for bindings. This function can modify the node or replace it with new nodes. This could be used to make syntax likeName: {{ firstName }}
work by detecting{{ expr }}
expressions in text nodes and inserting<!-- ko text: expr --><!-- /ko -->
before binding are applied to that node. -
Dynamic binding handlers: Normally, binding handlers are defined before bindings are applied by adding handler objects to
ko.bindingHandlers
. But you can also define handlers dynamically by overriding theko.getBindingHandler
function. This function is given a binding string and returns the handler for that binding (orundefined
if none exists). Here's an example that allows you use any binding starting withdata-
to set data attributes:var originalGetHandler = ko.getBindingHandler; ko.getBindingHandler = function(bindingKey) { var handler = originalGetHandler(bindingKey); if (!handler && bindingKey.match(/^data-/)) { handler = ko.bindingHandlers[bindingKey] = { update: function(element, valueAccessor) { element.setAttribute(bindingKey, ko.unwrap(valueAccessor())); } }; } return handler; }
-
checkedValue
binding: Normally, thechecked
binding will use the input'svalue
property, which is limited to string values, when updating its value. But if you also provide acheckedValue
binding, its value will be used instead; this provides a way to use a value of any type with thechecked
binding. -
Observable view models: This is still a bit experimental. The idea is that you can have the view model be dynamic without having to use templates and re-render the whole DOM. Instead, changing the view model will update each of the individual bindings. More detail later...
-
options
binding generateschange
event: When the options change, theoptions
binding tries to maintain the list selection so that the value of the selection stays the same. But if the selection changes because the selected value was removed, theoptions
binding will generate achange
event for the element. Other bindings that listen forchange
events, such asvalue
andselectedOptions
, will then be updated.