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({
names: [
{
first: "Anne",
last: "Ackerman"
},
{
first: "Ben",
last: "Beckham"
},
{
first: "Chad",
last: "Chapman"
},
{
first: "Irene",
last: "Ira"
}
],
offset: "0",
removeAnEntry: function () {
this.names.splice(+this.offset, 1);
}
});
document.getElementById("my-template").bind("bind", model);
});
});
<template id="my-template">
<div>
<label for="offset">Row# (starting with 0) to be removed: </label>
<input id="offset" type="text" value="{{offset}}" />
<input id="remove" type="button" value="Remove!" on-click="{{removeAnEntry}}" />
</div>
<template repeat="{{names}}">
<div>
First: <input type="text" value="{{first}}" />
Last: <input type="text" value="{{last}}" />
</div>
</template>
</template>