Error with mvvm custom display template.

Please click "Add Item" multiple times you will notice that the first item added never becomes enabled even though the computed observable that it is bound to has the value of false after the second item is added.

by Trae

HTML

<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<div id="testList" class="body">
Please click "Add Item"
<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, attr: { index: item}, 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: [{ item: 1, name: "item 1"}],
         itemUnremovable: function(){
             return vm.get("items").length <= 1;
         },
         addItem: function(e){
             var itemNumber = vm.items.length === 0 ? 1 : (Math.max.apply(Math, 
                     $.map(vm.items, function (v) { return v.item })) || 0) + 1;             
             vm.items.push({
                 item: itemNumber,
                 name: "item " + itemNumber
             });
             e.preventDefault();
         },
         removeItem: function(e){
             var item = $(e.target).attr("index"),
                 itemIndex = $.map(vm.items, function (v, i) { 
                if(v.item === +item){
                     return i; 
                 }
             })[0];             
             vm.items.splice(itemIndex, 1);             
             e.preventDefault();
         }
     });

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