4

有没有一种方法可以循环遍历 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>

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

4

2 回答 2

3

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

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

会产生

0
1
2
3
4

于 2013-05-15T18:07:36.130 回答
3

您可以嵌套foreach绑定，使用无元素表示法（请参阅链接文档中的“注释 4”）用于第二级。将其与使用$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 's answer的启发，我使用了<!-- ko if: ... -->确实有效的语法。

于 2013-05-15T18:07:55.850 回答