通过 dependentObservable 使用 Knockoutjs 更新 SlickGrid

Question

根据示例 http://jsfiddle.net/rniemeyer/A9NrP/ 我将 SlickGrid 与 Knockout.js 结合使用

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

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

更新： 我尝试使用 grid.invalidate();但它不起作用，并且还发现一旦执行 ko.dependentObservable ， addItem 函数就会停止工作

Answer 1

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

这里有一个更新版本。

编辑：Knockout 和 slickgrid 已更新，因此我更新了小提琴：
编辑：再次：

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

请注意以下事项：

grid.resizeCanvas(); 

Answer 2

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

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 参数指示您是否希望网格滚动回顶部。

Answer 3

就我而言，我需要将 slickgrid 和淘汰赛与绑定到不同控件的另一个视图模型一起使用。我使用 http://jsfiddle.net/hlascelles/5ddNM/ 作为示例并修复了一些问题。使用 http://jsfiddle.net/Schnapz/z4YLD/2/ 或查看下面的说明。

您可以按照示例中的说明保留网格、项目和视图模型的声明。但是，绑定对于包括 viewModel 本身在内的所有模型都应该是通用的（在 pageLoad 或其他中调用它）：

ko.applyBindings();

并且 addItem 应该如下所示：

addItem: function () {
    viewModel.items.push(new Item(0, "New", 5.00));
},

因为使用“this”在这里不起作用。

然后，自定义活页夹应该如下所示（来自某处另一个示例的令牌）：

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();
    var data = ko.utils.unwrapObservable(settings.data); //just for subscription
    grid.setData(data, true);
    grid.resizeCanvas(); // NB Very important for when a scrollbar appears
    grid.render();
}

}

另外，我遇​​到了添加元素的问题，但我看不到结果。经过一些研究 slickgrid 的来源后，我找到了这个解决方案：

<div id="grid" class="grid-canvas" data-bind="slickGrid: { 
                                                        data: viewModel.items, 
                                                        columns: viewModel.columns, 
                                                        options: { 
                                                                    enableColumnReorder: false,
                                                                    rowHeight: 20, 
                                                                    enableAddRow: true,
                                                                    autoHeight: true
                                                                 } }"></div>
<a href="#" class="btn-link" data-bind="click: viewModel.addItem">Add Item</a>

因为默认情况下 grid-viewport 的高度为 0px :) 只是在绑定过程中添加了一些选项。