Question

有没有办法循环遍历一个淘汰observableArray的索引，就像你在C＃或Java这样的语言中使用for循环一样？

使用下面的代码，我只是从第一个索引（0）抓取，但我希望能够遍历索引并在它们到来时从它们获取值

<table class="table table-hover table-bordered table-condensed">
    <thead>
        <tr>
          <th>
             <input type="checkbox" data-bind="checked: SelectAll" value="0" />
          </th>
          <th>Employee Name</th>
          <th>Sun</th>
          <th>Mon</th>
          <th>Tue</th>
          <th>Wed</th>
          <th>Thu</th>
          <th>Fri</th>
          <th>Sat</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Items">
        <tr>
          <td>
            <input type="checkbox" class="entity-id" data-bind="if: Timesheets()[0].RowID == 0, checked: IsChecked" />
          </td>
          <td><a class="span8" data-bind="if: Timesheets()[0].RowID == 0, text: EmployeeName, attr: { rowspan: Timesheets()[0].RowSpan }"></a>
          </td>
          <td><input type="text" class="span6" data-bind="value: Timesheets()[0].SundayHours"/>
          </td>
          <td><input type="text" class="span6" data-bind="value: Timesheets()[0].MondayHours" /></td>
          <td><input type="text" class="span6" data-bind="value: Timesheets()[0].TuesdayHours"/></td>
          <td><input type="text" class="span6" data-bind="value: Timesheets()[0].WednesdayHours"/></td>
          <td><input type="text" class="span6" data-bind="value: Timesheets()[0].ThursdayHours"/></td>
          <td><input type="text" class="span6" data-bind="value: Timesheets()[0].FridayHours"/></td>
          <td><input type="text" class="span6" data-bind="value: Timesheets()[0].SaturdayHours"/></td>
        </tr>                          
    </tbody>
</table>

有没有办法用淘汰赛做到这一点？

Answer 1

为此，请使用$ index上下文绑定。这给出了数组元素的从0开始的索引。

<div data-bind="foreach: ['a','b','c','d','e']">
    <span data-bind="text: $index"></span>
</div>

会产生

0
1
2
3
4

Answer 2

您可以使用无元素表示法（请参阅链接文档中的“注释4”）嵌套foreach绑定作为第二级。将其与使用binding context中的$parent和$data相结合，并创建如下内容：

<table>
    <tbody data-bind="foreach: Items">
    <!-- ko foreach: Timesheets -->
        <tr>
          <td><input type="checkbox" class="entity-id"/></td>
          <!-- ko if: $parent.Timesheets()[0] == $data -->
          <td data-bind="text: $parent.EmployeeName, 
                         attr: { rowspan: $parent.Timesheets().length }"></td>
          <!-- /ko -->
          <td><input data-bind="value: SundayHours"/></td>
          <td><input data-bind="value: MondayHours" /></td>
          <td><input data-bind="value: TuesdayHours"/></td>
          <td><input data-bind="value: WednesdayHours"/></td>
          <td><input data-bind="value: ThursdayHours"/></td>
          <td><input data-bind="value: FridayHours"/></td>
          <td><input data-bind="value: SaturdayHours"/></td>
        </tr>
    <!-- /ko -->
    </tbody>
</table>

这是一个带有工作示例的jsfiddle。我不确定原因，但if绑定无法直接在td元素上正常工作。受this question答案的启发，我使用了语法，该语法确实有效。

使用knockout迭代数组的索引

2 个答案: