liaison - delite widget with liaison template

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
<!--
    You can use RequireJS text plugin to define template string:
    http://requirejs.org/docs/api.html#text
-->
<script id="my-template" type="text/x-template">
    <div>
        First: <input type="text" value="{{first}}" />
        Last: <input type="text" value="{{last}}" />
    </div>
    <div>
        Model value: {{first}} {{last}}
    </div>
</script>
<liaison-binding-basic></liaison-binding-basic>

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(["deliteful-build/layer", "liaison-build/delite/layer"], function () {
    require([
        "delite/register",
        "delite/Widget",
        "liaison/delite/createRenderer"
    ], function (register, Widget, createRenderer) {
        register("liaison-binding-basic", [HTMLElement, Widget], {
            baseClass: "liaison-binding-basic",
            // You can use RequireJS text plugin to define template string:
            // http://requirejs.org/docs/api.html#text
            render: createRenderer(document.getElementById("my-template").innerHTML),
            first: "John",
            last: "Doe"
        });
        register.parse();
    });
});