liaison - Repeated <template> reflecting array splice

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
<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>

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({
            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);
    });
});