在 foreach 中创建动态属性的问题：knockoutjs

Question

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

无论点击哪一行，都会显示相同的"hidden row"。我明白了为什么……下面一行设置了 accordian 元素的目标。

<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 data-binding to dynamically set these attributes and utilize the $index context observable property of the foreach 绑定来构造唯一的匹配值。

例如，这可能导致数据目标为 data-bind="attr: { 'data-target': '#demo' + $index() }"，匹配的隐藏行 ID 为 data-bind="attr: { id: 'demo' + $index() }"。看看下面的简短示例：

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>

在 foreach 中创建动态属性的问题：knockoutjs

Problems creating dynamic attributes inside foreach: knockoutjs

javascript

knockout.js