liaison - Attribute template
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
<template id="my-template">
<table border="1">
<tbody>
<tr template repeat="{{rows}}">
<td>{{label}}</td>
</tr>
</tbody>
</table>
</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({
rows: [
{label: "1st row"},
{label: "2nd row"},
{label: "3rd row"}
]
});
document.getElementById("my-template").bind("bind", model);
});
});