HTML element data binding

Built-in data binding can help simplify HTML pages by removing the need for Javascript event handlers or a data binding library.

The simplest form of binding is to use the 'eval-' prefix on any attribute of any element whose initial value you would like to resolve using a Javascript expression.

<element eval-attribute='expression'>

The 'eval-' prefix will be removed from the attribute's name, and the attribute's value will be initialized with the string result of the given expression. The result will be ...

<element attribute='evaluated expression as a string'>


The 'bind-' prefix can be used to bind the value of an input element to a variable.

<input bind-value='variable'>

The text input will be filled with the value of the variable when the page begins, and the value of the variable will be updated when the user types into the text input.

The text input will not be automatically updated if the value of the variable is changed by a script, but can easily be updated by calling element.updateBinding() on the input element or any of its ancestors. Using an ancestor allows you to update an entire form.


Checkboxes and radio-buttons use the 'bind-with' attribute to bind a variable.

<input type='checkbox' bind-with='variable'>

<input type='radio' bind-with='variable' name='group' value='value' >

The input will be initialized to the value of the 'bind-with' variable, and the value of the variable will change if the input is clicked.

Once again, changing the value of the variable will not change the state of the input, but the input can be updated by calling updateBinding() on the element or one of its ancestors.