Knockout kendo grid template binding

http://stackoverflow.com/questions/10996945/knockout-kendo-grid-template-binding

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.common.min.css">
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js"></script>
<div id="grid"  data-bind="kendoGrid: { data: fruits, columns: [ 
            {
                field: 'name',
                title: 'Fruit',
                width: 50
            },
            {
                template: '<button class=\'k-button\' data-bind=\'click: function() { changeFruit() }\' >Change Fruit Name</button>',
                width: 30
            }               
           
         ], 
        scrollable: false, sortable: true, pageable: false }" style="height: 380px">
    </div>

CSS

#grid {
 height: 300px;
}

JavaScript

var ViewModel = function() {
    this.fruit1 = {
        color: ko.observable("green"),
        name: ko.observable("apple"),
    };
    
    this.fruit2 = {
        color: ko.observable("orange"),
        name: ko.observable("orange"),
    };
        
        
    this.fruits = ko.observableArray([
        this.fruit1, 
        this.fruit2
    ]);
    
    this.changeFruit = function() {
        // this line breaks the binding, 
        // when You change the property of the viewModel
        // You cannot call this function any more
        this.fruits()[0].name("Test");
        alert(this.fruits()[0].name());
    }
};

ko.applyBindings(new ViewModel());