通过dependentObservable使用Knockoutjs更新SlickGrid

Question

我正在使用基于示例http://jsfiddle.net/rniemeyer/A9NrP/的 knockout.js的SlickGrid

我有网格填充和添加按钮按照示例工作.我遇到的问题是当我通过ko.dependentObservable更新我的viewmodel的rows属性时,ko.bindingHandlers的'update'部分被触发但是光滑的网格没有获取更改.

定义绑定的html:

<div id="grid" data-bind="slickGrid: { data: rows, columns: columns }"></div>

SlickGrid代码(与示例相同):

var grid;
ko.bindingHandlers.slickGrid = {
    init: function (element, valueAccessor) {
        var settings = valueAccessor();
        var data = ko.utils.unwrapObservable(settings.data);
        var columns = ko.utils.unwrapObservable(settings.columns);
        var options = ko.utils.unwrapObservable(settings.options) || {};
        grid = new Slick.Grid(element, data, columns, options);
    },
    update: function (element, valueAccessor, allBindingAccessor, viewModel) {
        var settings = valueAccessor();
        // I can see the correct data here but the grid does not update
        var data = ko.utils.unwrapObservable(settings.data);  
        grid.render();
    }
}

我的模特:

myViewModel = {
data : ko.observableArray(),
tabs: ['High', 'Medium', 'Low'],
rows : ko.observableArray([]),
columns : [
        {
            id: "id",
            name: "ID",
            field: "id"
        },
        {
            id: "Location",
            name: "Location",
            field: "Location"
        },
        {
            id: "Comment",
            name: "Comment",
            field: "Comment"
        }
        ],
addItem: function() { // this works and SlickGrid adds a new row
  this.rows.push(new ModelRow(0, "New", 5.00));  
},

}

进行ajax调用的代码,并触发ko.bindingHandlers.slickGrid.update但slickgrid似乎没有获取更改,ajax确实返回有效数据,并在用户单击链接时触发:

ko.dependentObservable(function () {
   if (this.data.lastAlarmRequest) this.data.lastAlarmRequest.abort();
       this.data.lastAlarmRequest = $.get("/audit/alarmsdata/high", null, this.rows);
}, i2owater.viewmodels.AlarmsForViewModel);

为什么addItem函数有效但ko.bindingHandlers.slickGrid.update不起作用？在更新功能中,我可以看到网格应该绑定的正确数据.是因为行属性中的所有数据都被覆盖了吗？

更新:我试过使用grid.invalidate(); 但它不起作用,并且还看到addItem函数在执行ko.dependentObservable后停止工作

Answer 1

我刚刚遇到了同样的问题并找到了解决方案，将更新代码更改为以下内容：

update: function (element, valueAccessor, allBindingAccessor, viewModel) {
        var settings = valueAccessor();
        // I can see the correct data here but the grid does not update
        var data = ko.utils.unwrapObservable(settings.data);  
        grid.setData(data,true)
        grid.render();
    }

顺便说一下，setData 中的 true 参数表示是否希望网格滚动回顶部。