knockout.js - 为什么单击事件仅针对此 KoGrid 模板中的第一个元素触发？

Question

我正在尝试将单击事件处理程序绑定到 KoGrid 中的某些锚标记。但是，点击事件仅附加到第一个锚标记。这不是语法错误，因为如果我切换标签的顺序，那么之前不工作的第二个链接就会开始工作。

这是 jsfiddle：jsfiddle

<!-- Html -->
<div style="height: 300px; width: 500px" class="gridStyle" data-bind="koGrid: gridOptions"></div>

// Javascript
function viewModel() {
    var self = this;

    self.Events = ko.observableArray([
        { FirstName: "Jenny", LastName: "Jones" },
        { FirstName: "Henry", LastName: "Howe" }
    ]);

    self.gridOptions = {
        data: self.Events,
        columnDefs: [
            { field: 'FirstName' },
            { field: 'LastName' },
            { field: 'ActionField0', displayName: '&nbsp;',
             cellTemplate:
                 '<a href="#" data-bind="click: $userViewModel.save">Save</a> ' +
                 '<a href="#" data-bind="click: $userViewModel.edit">Edit</a>'         
            }
        ],
        autogenerateColumns: false,
        canSelectRows: false,
        showColumnMenu: false,
        multiSelect: false,
        enableColumnResize: false
    };

    self.edit = function() {
        alert("Edit");
    }

    self.save = function() {
        alert("Save");
    }
}

$(function () {
    var peopleViewModel = new viewModel();
    ko.applyBindings(peopleViewModel);
});

Answer 1

cellTemplate 要求有一个根级元素。在您的情况下，您的单元格模板包含两个a，所以它只需要第一个。

为了使其工作（如果您不想创建两个单独的列）只需将两个锚包装在 a 中div：

cellTemplate:
    '<div>' +
    '<a href="#" data-bind="click: $userViewModel.save">Save</a> ' +
    '<a href="#" data-bind="click: $userViewModel.edit">Edit</a>' +
    '</div>'

演示JSFiddle。