jquery - 从剑道网格中删除项目绑定到淘汰嵌套的可观察对象

Question

我有一个剑道网络网格与淘汰赛相结合。我的 Grid 的来源来自嵌套的 observable 数组。网格的最后一列包含一个用于删除该行的按钮。我该怎么做？

http://jsfiddle.net/rqL3E/

 <div data-bind="foreach: items">
   <h5 style="color:red" data-bind="text:name"></h5>

   <div id="selectedServices" 
        data-bind='kendoGrid: {
            selectable: true,
            data: sample,
            columns: [
                { field: "id", title: "id"},
                { field: "name", title: "name"}, 
                { command:[{text: "x", className: "btnRemove" }]}
            ]}' 
        data-role="grid"></div>


  <div>

Answer 1

You are pretty close in your fiddle. You would not want to add the id within the foreach loop, as it duplicates the id. One option is to add an id on the parent (the one with the foreach) and hook up a handler like:

$("#selectedServices").on("click", ".btnRemove", function (e) {
    var $current = $(e.currentTarget),
        widget = $current.closest(".k-grid").data("kendoGrid"),
        dataItem = widget && widget.dataItem($current.closest("tr")),
        item = ko.dataFor($current[0]);

    if (item, dataItem && dataItem.id) {
        vm.removeSample(item, dataItem.id);
    }
});

So, we get the grid instance by looking at the ancestors of the clicked element, then identify the dataItem by looking at the row that the clicked elements is in and finally use the id to remove the item.

Working fiddle here: http://jsfiddle.net/rniemeyer/L26q8/