Error with mvvm custom display template. this works.

This works but is a hack

by Trae

HTML

<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<div id="testList" class="body">
Test
<ul data-template="testTemplate" data-bind="source: items"></ul>
<a data-bind="click: addItem">Add Item</a>
</div>

<script id="testTemplate" type="text/x-kendo-tmpl">
    <li> 
        <a href="\#" data-bind="text: name, disabled: itemUnremovable, click: removeItem"> 
        </a>
    </li>
</script>

CSS

a:link,
a:visited, 
a:hover,
a:active{
    color: green;
}

a:link[disabled],
a:visited[disabled], 
a:hover[disabled],
a:active[disabled] {
    color: red;
}

JavaScript

$(function () {
     var vm = kendo.observable({
         items: [],
         isUnremovable: true,
         itemUnremovable: function(){
             return vm.items.length <= 1;
         },
         setUnremovable: function(){
             vm.set("isUnremovable", vm.items.length <= 1);
         },
         addItem: function(e){
             e.preventDefault();
             vm.items.push({
             item: 1,
                 name: "item " + vm.items.length + 1
             });
             vm.setUnremovable();
         },
         removeItem: function(e){
             e.preventDefault();
             vm.items.pop();
             vm.setUnremovable();
         }
     });

     kendo.bind($("#testList"), vm);
 })