KendoUI：將視圖模型綁定到數據源更改

Question

我有一個可觀察對象，它定義了綁定到網格的數據源的指針，以及一個應該返回我在數據源中聲明的聚合值的自定義字段。

我想將第二個字段（「totAmount」）綁定到自定義HTML元素。

我不明白如何更新它的值：當我調用數據源的「read（）」方法時，不應該在界面上更新綁定值嗎？它僅適用於「原始」模型字段嗎？

=== 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

我以前的答案並不完全正確：它綁定了網格更改時的模型更新（每行選擇）。最好將它綁定到數據源的「更改」事件上：

=== 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

到目前爲止，我也發現了類似我以前的帖子（bind HTML elements to grid selected row/dataItem）的解決方案，以綁定到數據源網格的「改變」事件設定值：

=== 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>