knockout.js - 通过dependentObservable 使用 Knockoutjs 更新 SlickGrid

Question

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

我有网格填充和添加按钮按照示例工作。我遇到的问题是，当我通过 ko.dependentObservable 更新 View 模型的 rows 属性时，会触发 ko.bindingHandlers 的“更新”部分，但光滑的网格不会获取更改。

定义绑定(bind)的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 无效？在更新功能中，我可以看到网格应该绑定(bind)到的正确数据。
是不是因为 rows 属性中的所有数据都被覆盖了？

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

Answer 1

我已经更新了 rniemeyer 非常有用的 jsfiddle 来修复滚动条错误。在原始版本中，尝试添加 20 行然后使用垂直滚动条，您会看到 UI 问题。问题是滚动 Pane 错误地计算了 View 大小，因此滚动条抖动。

这里是更新版本。

编辑: knockout 和 slickgrid 已经更新，所以我更新了 fiddle :
编辑:再一次:

http://jsfiddle.net/5ddNM/79/

请注意以下事项:

grid.resizeCanvas();