Knockout Grid Computed Value

Knockout Grid Computed Value Issue

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/v2.2.1/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/Knockout-Contrib/KoGrid/master/koGrid-2.1.1.debug.js"></script>
<link rel="stylesheet" href="http://ericmbarnard.github.com/KoGrid/css/KoGrid.css">
<body>
Hello World
Name : <strong data-bind="text: name"></strong>

<div style="position: absolute;  left: 0; right: 0; top: 0; bottom: 0;" data-bind="koGrid: gridOptions"></div>
    
</body>

JavaScript

var datastore = {

    initialData: [
        {name: "Nthdimenzion", age: 50},
        {name: "Tiancum", age: 43},
        {name: "Jacob", age: 27},
        {name: "Nephi", age: 29},
        {name: "Enos", age: 34}
    ]
}

function Item(data) {
    this.name = ko.observable(data.name);
    this.age = ko.observable(data.age);
    this.computedAge = ko.computed(function(){
        return 100 - this.age();
    }, this).extend({ throttle: 5 });
}

var ViewModel = function AppVM() {
    var self = this
    self.editableCellTempate = '<input type="text" data-bind="attr: { \'class\':\'kgCellText colt\' + $index()}, value: $parent.entity[\'age\']"/>';
    
    self.calculatedCellTemplate = '<span data-bind="text: $parent.entity.computedAge"></span>';

    self.name = "Hello Sudarshan"; 
    self.browsers = ko.observableArray(
        ko.utils.arrayMap(
            datastore.initialData,
            function(data){ return new Item(data); }
        )
    );
    self.gridOptions = { data: self.browsers, selectedItems: self.selectedItems, columnDefs: [
        {field: 'name', displayName: 'Name'},
        {field: 'age', displayName: 'Age', cellTemplate: self.editableCellTempate } ,
       {field: 'computedAge', displayName: '100 -Age',cellTemplate:self.calculatedCellTemplate}
    ]        
    };
}
var appVM = new ViewModel()

ko.applyBindings(appVM)