liaison - Imperative binding
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
<input type=“text” />
CSS
@font-face{
font-family: Helvetica Neue;
src: local("Helvetica Neue Light"), local("HelveticaNeue-Light");
}
template, * [template] {
display: none;
}
body, input {
font-family: Segoe UI, Helvetica Neue, Helvetica, arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.cell {
width: 16ex;
display: inline-block;
}
JavaScript
require.config({baseUrl: "http://ibm-js.github.io/libraries/master/"});
require(["liaison-build/layer"], function () {
require([
"liaison/Observable",
"liaison/ObservablePath",
"liaison/DOMBindingTarget"
], function (Observable, ObservablePath) {
var observable = new Observable({foo: "FooValue0"}),
observablePath = new ObservablePath(observable, "foo"),
input = document.querySelector("input");
input.bind("value", observablePath); // input.value becomes "FooValue0"
setTimeout(function () {
// input.value becomes "FooValue1" at the end of microtask
observable.set("foo", "FooValue1");
}, 2000);
});
});