liaison - Synchronous change delivery

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
<div><input type="button" value="Change values and show change records below" onclick="change();" /></div>
<div id="results" style="display:none;">
    <div>1st change record delivered:</div>
    <pre></pre>
    <div>2nd change record delivered:</div>
    <pre></pre>
</div>

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(["decor-build/layer"], function () {
    require(["decor/Observable"], function (Observable) {
        var count = 0,
            observable = new Observable({foo: "Foo0"});
        function observeCallback(changeRecords) {
            document.getElementsByTagName("pre")[count++].innerHTML = JSON.stringify(changeRecords, null, 4);
        }
        Observable.observe(observable, observeCallback);
        window.change = function () {
            document.getElementById("results").style.display = "";
            observable.set("foo", "Foo1");
            Observable.deliverChangeRecords(observeCallback);
            observable.set("bar", "Bar0");
            Observable.deliverChangeRecords(observeCallback);
        };
    });
});