Creating application with good separation-of-concern on top of emerging stardards with liaison
liaison is a data binding library that aims for emerging web standards compatibility. It provides a basis of building your application having separation-of-concern (MV* style) in mind.
liaison has low-level observable objects that works as a shim of ES7
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
Below example establishes binding between properties and DOM elements. The bindings in
<input> below are two-way:
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.
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+