Data binding via object mirrors

All the elements on this page are bound to the same Person object.

One-way data binding

First name
{{name}}
Name length
{{name.length}}
Married
{{married}}
Language
{{language}}
Show if married:
{{name}} is married
Children:
{{child.name}}
Implementation:
HTML:
<fieldset id="one-way">
  First name {{name}}
  Name length {{name.length}}
  Married {{married}}
  Language {{language}}
</fieldset>

DART:
var person = new Person("Jim", "English", false);
var element = query("#one-way");
var binder = new DataBinder(element, person);
binder.bind();

TO UNBIND:
binder.unbind();
Notes:
One-way data binding on a particular element can be used only once.

Two-way data binding

First name
Married
Language
English
French
Russian
Implementation:
HTML:
<fieldset id="two-way-form-1">

First name
<input data-bind="value:name"/>
Married
<input type="checkbox" data-bind="bool:married"/>

Language
<input type="radio" name="language" value="English" data-bind="value:language"> English
<input type="radio" name="language" value="French" data-bind="value:language"> French
<input type="radio" name="language" value="Russian" data-bind="value:language"> Russian

</fieldset>

DART:
var person = new Person("Jim", "English", false);
var element = query("#two-way-form-1");
var binder = new DataBinder(element, person);
binder.bind();

TO UNBIND:
binder.unbind();

Two-way data binding

First name
Married
Language
English
French
Russian
Implementation:
HTML:
<fieldset id="two-way-form-2">

First name
<input data-bind="value:name"/>
Married
<input type="checkbox" data-bind="bool:married"/>

Language
<input type="radio" name="language" value="English" data-bind="value:language"> English
<input type="radio" name="language" value="French" data-bind="value:language"> French
<input type="radio" name="language" value="Russian" data-bind="value:language"> Russian

</fieldset>

DART:
var person = new Person("Jim", "English", false);
var element = query("#two-way-form-2");
var binder = new DataBinder(element, person);
binder.bind();

TO UNBIND:
binder.unbind();

Action Binding

Implementation:
HTML:
<div id="actions">
  <button data-action="click:toUpperCase">TO UPPER CASE</button>
  <button data-action="click:toLowerCase">to lower case</button>
</div>

DART:
class Person {
  String name;
  String language;
  bool married;

  Person(this.name, this.language, this.married);

  toUpperCase(e){
    name = name.toUpperCase();
  }

  toLowerCase(e){
    name = name.toLowerCase();
  }
}

var person = new Person("Jim", "English", false);
var element = query("#action");
var binder = new DataBinder(element, person);
binder.bind();

TO UNBIND:
binder.unbind();

Unbinding and rebinding

Implementation:
TO BIND:
binder.bind();

TO UNBIND:
binder.unbind();
Notes:
Dynamic binding is easier to understand and more flexible than the one relying on compilation. If you want to bind an object to an element, just pass them to the binder and call "bind". Do you want to unbind? Just call "unbind". You can load template from the database, or dynamically build them.