绑定到表的数据，使用复选框检索多行数据？

Question

我是全新的淘汰赛，我试图扩展一些绑定数据的例子。

下面显示绑定到一个表对象：

<table> 
    <tbody data-bind="foreach: Games"> 
     <tr> 
      <!--<td style="width:auto;"> 
       <input name="GameSelect" type="checkbox" data-bind="value: $data, checked: $parent.selectedGames" /> 
      </td>--> 
      <td data-bind="text:Name"></td> 
      <td data-bind="text: Group"></td> 
      <td> 
       <select class="form-control" data-bind="options: $parent.GameGroups, optionsText: 'GameGroupName', optionsValue: 'GameGroupId', value: $parent.filter"></select> 
      </td> 
      <td> 
       <button class="btn btn-success btn-sm" data-bind="click: $parent.makeChanges">Change »</button> 
      </td> 
     </tr> 
    </tbody> 
</table> 

<!--<button class="btn btn-info btn-block" data-bind="click:makeChangesAll">Change All</button>--> 

单击更改将获得包含数据该行的对象，并与makechanges功能使用：

 self.makeChanges = function (data) { 
     ... 
     } 

我想为每个表格行添加一个复选框，并添加一个按钮来同时获取所有选定的对象，但我无法使其工作。我的一些尝试是在注释掉的代码中。任何人都可以告诉我如何从每行使用makeChanges函数的一个数据对象获取多个用于使用makeChangesAll函数选择的每个复选框？

Answer 1

它的工作方式非常符合您的要求。只需在点击处理程序中使用selectedGames()即可。

function game(name, group) { 
 
    return { 
 
    Name: name, 
 
    Group: group 
 
    }; 
 
} 
 

 
var vm = (function() { 
 
    var result = { 
 
    selectedGames: ko.observableArray(), 
 
    Games: ko.observableArray([ 
 
     game('one', 'group1'), 
 
     game('two', 'group1'), 
 
     game('three', 'group2'), 
 
     game('four', 'group2') 
 
    ]), 
 
    makeChangesAll: function() { 
 
     console.debug("Selected Games:", result.selectedGames()); 
 
    } 
 
    }; 
 

 
    return result; 
 
}()); 
 

 
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<table> 
 
    <tbody data-bind="foreach: Games"> 
 
    <tr> 
 
     <td style="width:auto;"> 
 
     <input name="GameSelect" type="checkbox" data-bind="value: $data, checked: $parent.selectedGames" /> 
 
     </td> 
 
     <td data-bind="text:Name"></td> 
 
     <td data-bind="text: Group"></td> 
 
     <td> 
 
     <select class="form-control" data-bind="options: $parent.GameGroups, optionsText: 'GameGroupName', optionsValue: 'GameGroupId', value: $parent.filter"></select> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button class="btn btn-info btn-block" data-bind="click:makeChangesAll">Change All</button>