javascript - 在 foreach 内创建动态属性时出现问题 : knockoutjs

Question

我在 Accordion 中显示数据时遇到问题，如图所示。

无论单击哪一行，都会显示相同的“隐藏行”。我明白为什么......下面的行设置了 Accordion 元素的目标。

<tr data-toggle="collapse" data-target="#demo1"  class="accordion-toggle">

不知何故，我需要使“#demo1”以及隐藏行都独一无二。

下面是代码:我如何确保每一行都有自己唯一的目标 ID 以及隐藏行？

谢谢!

<table class="table table-striped table-bordered notranslate">
   <thead>
      <tr>
         <th style="width: 10%">ID</th>
         <th>First</th>
         <th>Last</th>
         <th>Email</th>
         <th>Phone</th>
         <th>Actions</th>
      </tr>
   </thead>
   <tbody data-bind="foreach: customers">
      <tr data-toggle="collapse" data-target="#demo1"  class="accordion-toggle">
         <td>
            <i class="fa fa-plus" style="cursor: pointer"></i>
         </td>
         <td data-bind="text: firstName"></td>
         <td data-bind="text: lastName"></td>
         <td data-bind="text: email"></td>
         <td data-bind="text: phone"></td>
         <td>  <i class="fa fa-pencil mr-1" data-bind="click: $root.editCustomer"></i> <i class="fa fa-trash mr-1" data-bind="click: $root.deleteCustomer"></i></td>
      </tr>
      <tr>
         <td colspan="6" class="hiddenRow">
            <div class="accordian-body collapse" id="demo1"  >
               <table class="" style="background-color: lightyellow; width: 100%;">
                  <tbody>
                     <tr>
                        <th>Address 1</th>
                        <th>Address 2</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Zip Code</th>
                     </tr>
                     <tr>
                        <td data-bind="text: address1"></td>
                        <td data-bind="text: address2"></td>
                        <td data-bind="text: city"></td>
                        <td data-bind="text: state"></td>
                        <td data-bind="text: zip"></td>
                     </tr>
               </table>
            </div>
         </td>
      </tr>
   </tbody>
</table>

Answer 1

您应该确保每行的data-target 和匹配的隐藏行id 都是唯一的。您可以使用 attr数据绑定(bind)来动态设置这些属性并利用 foreach 的 $index 上下文可观察属性绑定(bind)以构造唯一的匹配值。

这可能会导致例如数据目标的 data-bind="attr: { 'data-target': '#demo' + $index() }" 和 data-bind="attr: { id: 'demo' + $index() }" 用于匹配的隐藏行 id。看一下下面的简化示例:

ko.applyBindings({
  customers: [{}, {}, {}, {}]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<table class="table table-striped table-bordered notranslate">
   <thead>
      <tr>
         <th style="width: 10%">ID</th>
         <th>First</th>
         <th>Last</th>
         <th>Email</th>
         <th>Phone</th>
         <th>Actions</th>
      </tr>
   </thead>
   <tbody data-bind="foreach: customers">
      <tr data-toggle="collapse" data-bind="attr: { 'data-target': '#demo' + $index() }"  class="accordion-toggle">
         <td colspan="6">Click to toggle</td>
      </tr>
      <tr>
         <td colspan="6" class="hiddenRow">
            <div class="accordian-body collapse" data-bind="attr: { id: 'demo' + $index() }">
               <table class="" style="background-color: lightyellow; width: 100%;">
                  <tbody>
                     <tr>
                        <th>Address 1</th>
                        <th>Address 2</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Zip Code</th>
                     </tr>
                     <tr>
                        <td colspan="5">...</td>
                     </tr>
               </table>
            </div>
         </td>
      </tr>
   </tbody>
</table>