KendoUI: binding view model to datasource change - mvvm

Question

I have an observable object which defines a pointer to a datasource binded to a grid, and a custom field which should return an aggregate value I declared in the datasource.
I would like to bind the second field ("totAmount") to a custom HTML element.
I do not understand how to update its value: when I call the "read()" method of the datasource shouldn't the binded value also be updated on the interface? Does it work only with "primitive" model fields?
=== JAVASCRIPT ===
var vm = kendo.observable({
gridDatasource: new kendo.data.DataSource({ ... }),
totAmount: function() {
var ds = this.get("gridDatasource");
var value = (ds.aggregates()) ? ds.aggregates().totAmount : 0;
return value;
}
});
=== HTML ===
<span data-bind="text: totAmount"></span>

Answer 1

My previous answer was not totally correct: it binds the model update on grid change (on each row selection). It is better to bind it to the "change" event of the datasource:
=== JAVASCRIPT ===
var vm = kendo.observable({
gridDatasource: new kendo.data.DataSource({ ... }),
totAmount: 0
});
vm.gridDatasource.bind("change", function(e) {
vm.set("totAmount", this.aggregates().totAmount);
});
=== HTML ===
<span data-bind="text: totAmount"></span>

Answer 2

So far I have found a solution similar to my previous post (bind HTML elements to grid selected row/dataItem), setting the value in the "change" event of the grid binded to the datasource:
=== JAVASCRIPT ===
var vm = kendo.observable({
gridDatasource: new kendo.data.DataSource({ ... }),
totAmount: 0
});
$("#grid").kendoGrid({
change: function(e) {
vm.set("totAmount", this.dataSource.aggregates().totAmount);
}
});
=== HTML ===
<span data-bind="text: totAmount"></span>