Question

我试图将KnockoutJS ViewModel绑定到数据表：

<table class="table table-sm" id="user">
  <thead>
    <tr role="row">
      <th>Id</th>
      <th width="30%" class="text-uppercase">Email</th>
      <th width="15%" class="text-uppercase">Active</th>
      <th width="2%" class="text-center text-uppercase">Edit</th>
    </tr>
  </thead>
  <tbody>
    <!-- ko foreach: users() -->
    <tr>
      <td data-bind="text: $data.id"></td>
      <td data-bind="text: $data.email"></td>
      <td data-bind="text: $data.isDisabled"></td>
      <td class="text-center" data-bind="toggleClick: $root.showDialog"></td>
    </tr>
    <!-- /ko -->
  </tbody>
</table>

当用户单击每行上的编辑时，它会打开一个模式对话框，可以在其中编辑数据。

如何将点击的行数据绑定到模态对话框表单？

所以我可以这样做：

  <div class="modal-body" data-bind="with: User">
    <input data-bind="text: email" />
    <input data-bind="text: isDisabled" />
  </div>

Answer 1

首先，我会在视图模型上用普通的点击功能替换toggleClick自定义绑定，因为你真的想要做的不仅仅是切换对话框。使用单击功能，您可以访问单击的行数据，然后使用它来设置当前/所选用户。

self.toggleClick = function(data){
    self.showDialog(!self.showDialog());
    self.selectedUser(data);
}

示例：https://jsfiddle.net/0vou6xs0/6/

然后，您可以像使用所选用户一样使用with绑定。

<div class="modal-body" data-bind="with: selectedUser">
    <input data-bind="value: email" />
    <input data-bind="value: isDisabled" />
</div>

在表格单元格上单击“将数据绑定到模态”

1 个答案: