綁定到表的數據，使用複選框檢索多行數據？

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>