Home

Usage

Bind a DOM object and its children to a data object

Wire.Wrap(bindingRootDomObject, dataObject)

Clear bindings and associated memory usage

Wire.Unwrap()

The binding process consists of a series of comma separated 'data-bind' attribute values on the html object. Each binding statement consists of a binding type and a data object path. Eg

Supported binding types are:

• text: Sets (or creates) the first textNode child of the current DOM element to the value described in the data object path.
• class: adds or removes a class entry of the same name as the last part of the data object path.
• id: set a 'data-id' value.
• style: sets the value of a style item of the same name as the last part of the data object path.
• value: binds to the value of the DOM item.
• option: used on a DOM container item (any nodeType) to binf the values of the underlying set of radio buttons.

Assuming the following data:

data = { 'Name': 'Bill', 'Address': { 'Street1': '1 Short St', 'Town': 'Jerrabomberra', 'State': 'NNQ', 'Post code': '9912' }, 'GoodMate': 'True' };

Then the following examples will work:

<div data-bind="text: Name, class: GoodMate ></div>

• This will set the first text node the div to "Bill".
• It will add the class "GoodMate" to the div.

<input type=text data-bind="value: Name" />

• Binds the value "Bill" to the value of the textbox and will apply any edits to the underlying data object and update the above Div's text node.

<div data-bind="option: Address.State"> <label><input type="radio" name="name1" value="NNQ" /> New North Queensland</label> <label><input type="radio" name="name1" value="OSW" /> Old South Wales</label> <label><input type="radio" name="name1" value="EA" /> Eastern Australia</label> </div>

To complete the binding (assuming these DOM elements were in a Div):

Wrap.Wire(divElement, data);

The Data object will always be up to date with any edits; so can be sent back to the server whenever necessary.