liaison has low-level observable objects that works as a shim of ES7 Object.observe() and Array.observe() with "value-holder" object approach. It also has following APIs, they aim to provide good compatibilities to APIs that are foreseed to be standards in each layer:

• High-level observation API (BindingSource)
• Declarative two-way bindings based on mustache syntax, based on <template> element (one of Web Components standards)
• Imperative two-way bindings to DOM and Custom Elements, compatible to Polymer Node.bind() API

Declarative binding

Below example establishes binding between properties and DOM elements. The bindings in <input> below are two-way:

See here for more details on declarative binding, and here for advanced topics to work with <template>.

Imperative binding

Below example establishes binding between a property and DOM element. .set() API is used for trigger change notification for observers. The binding in <input> below is two-way:

See here for more details on imperative binding.

delite/deliteful widgets in template

You can have delite/deliteful widgets in <template> for data binding, once you import liaison/delite/templateBinderExtension module. It's two-way, too, meaning that in addition to data model update reflected to widget, update in widget is reflected back to data model. Here's an example:

delite widget with liaison's data binding features

You can also create delite widgets with liaison's two-way binding features by using liaison/delite/createRender module for widget's buildRendering() callback, for example:

liaison supports newer browsers with better web standards conformance. Current list of supported browsers are:

• IE9+ (Document modes emulating older IEs are not supported)
• Safari 6.1/7.0
• Latest Firefox
• Latest Chrome
• Android “stock” browser 4.1+