KendoUI：将视图模型绑定到数据源更改

Posted 2023-05-07

【中文标题】KendoUI：将视图模型绑定到数据源更改

【英文标题】：KendoUI: binding view model to datasource change

【发布时间】：2012-11-28 22:05:54

【问题描述】：

我有一个可观察对象，它定义了一个指向绑定到网格的数据源的指针，以及一个应该返回我在数据源中声明的聚合值的自定义字段。

我想将第二个字段（“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>

【参考方案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>

【参考方案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>