items not refreshing

by grippstick

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.metro.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<div id='container'>
    <div id='items'  data-bind='showProgress:showProgress,source:contacts' data-template='itemTemplate'></div>
</div>
<script id="itemTemplate" type="text/x-kendo-template">
    #if(data.ID>0){#
    <div >        
        #=data.ID#
    </div>
    #}else{#
        <div class='card contact' data-bind='click:getNextPage'>
            Show More Records
        </div>
    #}#
</script>

JavaScript

kendo.data.binders.showProgress = kendo.data.Binder.extend({
        refresh: function () {
            var $element=$(this.element);

            //make sure we have a progressContainer class.
            $element.addClass('progressContainer');
            
            var value = this.bindings["showProgress"].get();
            if (value) {
                kendo.ui.progress($element, true);
            } else {
                kendo.ui.progress($element, false);
            }
        }
    });

var $items=$('items');

var vm = new kendo.observable({
    showProgress:false,
    contacts: [],
    getNextPage: function () {
        //i need to show progress since this would normally be inside of an ajax call
        vm.set('showProgress',true);
        
        var newItems = [{
            ID: Math.random()
        }, {
            ID: Math.random()
        }];
        
        var contacts = vm.contacts;
        var length = contacts.length;
        
        //we need to pop the last item, before we add new ones                        
        contacts.pop();
        
        //loop through and add the new items
        $.each(newItems, function (index, item) {
            contacts.push(item);
        });
        
        if (contacts.length<10) {
            //this is the exact page size so lets add an add more button
            contacts.push({ ID: -1 });
        }
        
        //!!!!!!!!!!!!!!!!!!!!!!
        //uncomment the line below and it starts working....
        //vm.contacts.trigger('change');
        
        //stop showing progress
        vm.set('showProgress',false);
    }
});

kendo.bind($('#container'), vm);

vm.getNextPage();