在表格单元格单击时将数据绑定到模态答案

【问题标题】：Bind Data to Modal on table cell click在表格单元格单击时将数据绑定到模态
【发布时间】：2017-05-20 00:54:30
【问题描述】：

我正在尝试将 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>

【问题讨论】：

标签： javascript jquery knockout.js datatable

【解决方案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>

【讨论】：