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>

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

1 个答案: