Iterate through array indices using knockout

Question

Is there a way to scroll the indices of observable knockout attributes, like with a for loop in C # or Java?

With the code below, I just grab onto the first index (0), but I want to be able to scroll through the indexes and get values ​​from them as they appear

<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> 

Is there a way to do this with a knockout?

Answer 1

You can nest foreach bindings using elementary notation (see "Note 4" in the related documentation) for the second level. Combine this using $parent and $data from the binding context and create something like this:

 <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> 

Here's the jsfiddle with a working example. I'm not sure why, but the if binding did not work directly with the td element correctly. Inspired by this question , I used the syntax <!-- ko if: ... --> , which works.

Answer 2

To do this, use the $ index context binding. This gives an index based on 0 elements of the array.

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

will give

0
1
2
3
4