liaison - Repeated <template> instantiation
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
<template id="my-template">
<div>
First: <input type="text" value="{{first}}" />
Last: <input type="text" value="{{last}}" />
</div>
</template>
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/wrapper",
"liaison/DOMTreeBindingTarget"
], function (wrapper) {
var model = wrapper.wrap([
{
first: "Anne",
last: "Ackerman"
},
{
first: "Ben",
last: "Beckham"
},
{
first: "Chad",
last: "Chapman"
},
{
first: "Irene",
last: "Ira"
}
]);
document.getElementById("my-template").bind("repeat", model);
});
});