liaison - ObservablePath

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
<input type="text" />
<span></span>

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([
        "decor/Observable",
        "liaison/ObservablePath"
    ], function (Observable, ObservablePath) {
        var observable = new Observable({foo: new Observable({bar: "Bar0"})}),
            observablePath = new ObservablePath(observable, "foo.bar"),
            input = document.querySelector("input"),
            text = document.querySelector("span").appendChild(document.createTextNode("")),
            initialValue = observablePath.open(function (newValue, oldValue) {
                input.value = newValue;
                text.nodeValue = newValue;
            });
    
        input.value = initialValue;
        text.nodeValue = initialValue;
    
        input.addEventListener("input", function (event) {
            // Ends up with observable.foo.set("bar", input.value);
            observablePath.setValue(input.value);
        });
    });
});