通过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();但它不起作用，并且还看到 addItem 函数在执行 ko.dependentObservable 后停止工作

Answer 1

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

这里是更新版本。

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

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

注意以下几点：

grid.resizeCanvas(); 

Answer 2

在我的情况下，我需要使用 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 :) 只是在绑定期间添加了一些选项。

Answer 3

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

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 参数表示是否要让网格回滚到顶部。