knockout.js - 剑道击倒 : Binding "selected" viewmodel property with grid

Question

我正在使用 RPNiemeyer 的 kendo-knockout 库将我的 View 模型与我的 KendoUI 网格绑定(bind)。我想做的是订阅网格的更改事件，这样我就可以更新相应的 View 模型项。

我用对象绑定(bind)了一个 observableArray，如下所示:

{
  Address: "Street name"
  ClientNumber: 1337
  NamePartner: "Client name"
  Selected: false
}

现在，我希望在选择相应行时将 Selected 属性设置为 true(KendoUI 网格的更改事件)。为此，我认为我应该使用 Knockoutjs 自定义绑定(bind)处理程序。

我找到了这个 http://jsfiddle.net/D3rSk/155/ ，那是在做同样的事情。唯一的问题是这个例子在我的控制台中给出了一些错误，它还绑定(bind)了一个单独的“selectedItem”可观察对象，而我想将它绑定(bind)到我的 observableArray 中的属性。

提前致谢。

Answer 1

做你想做的事情并不是完全无缝的，但你可以这样做:

• 为 change 事件添加处理程序
• 使用网格的select方法获取选中的行元素
• 使用网格的dataItem 方法从行元素获取数据项
• 此 dataItem 是一个干净的对象，因此获取其唯一键(在您的情况下为 ClientNumber)并使用它在您的 observableArray 中查找原始项目。

类似于:

<div id="grid" data-bind="kendoGrid: { data: items, sortable: true, selectable: true, change: updateSelected, columns: ['Address', 'ClientNumber', 'NamePartner'], widget: grid }"></div>

在您的 View 模型上使用 updateSelected 方法，例如:

updateSelected: function() {
    var grid = viewModel.grid(),
        row = grid.select(),
        clientNumber = grid.dataItem(row).ClientNumber,
        actualItem = ko.utils.arrayFirst(viewModel.items(), function(item) {
           return item.ClientNumber === clientNumber;
        });

    if (actualItem) {
        actualItem.Selected = true;

        if (viewModel.previouslySelected) {
            viewModel.previouslySelected.Selected = false;   
        }

        viewModel.previouslySelected = actualItem;
    }            

    return true;
}

样本:http://jsfiddle.net/rniemeyer/7MXfj/

您可以考虑尝试将此逻辑移动到将添加到 kendoGrid 绑定(bind)旁边的自定义绑定(bind)中。