Original Question

Does any one have or know of a binding for knockout that would allow behavior similar to a for loop? I can make a foreach do what I want but it would be nice if I didn't have to do it that way.

Edit 2

I am trying to create table rows based on a selection the user makes. In some cases I need x rows where x is the length of an array, other times x represents the largest number rows that will be needed to display n number of arrays.

Ex: image1 is built based on 4 different arrays all which vary in size image2 is built from the same array and is doubled in this case.

<div data-bind="if: selectedTab()">
<table>
<thead>
  <tr>
    <td>
      <div class="a-i-post-All"></div>
    </td>
    <!-- ko foreach:$root.selectedTab().races-->
    <td>
      <input type="checkbox" />
    </td>
    <!-- /ko -->
  </tr>
</thead>
<tbody data-bind="foreach: selectedTab().runners"> // <-- This is an empty array created by the max number of Runners in the selectedTabs array of Races
  <tr>
    <td>
      <div class="a-i-post"></div>
    </td>
    <!-- ko foreach:$root.selectedTab().races-->
    <td>
      <!-- ko if: Runners.length > $parentContext.$index()-->
      <input type="checkbox" />
      <!-- /ko -->
    </td>
    <!-- /ko -->
  </tr>
</tbody>

The above works fine and creates what i want, but i don't like having to turn selectedTab.runners from a number into an empty array just to make it loop n times to create the rows. I am open for suggestions. Note As of the time I posted this question originally I have revised this code considerably and am now down to only one occurrence related to my initial question.

Original Question

Does any one have or know of a binding for knockout that would allow behavior similar to a for loop? I can make a foreach do what I want but it would be nice if I didn't have to do it that way.

Edit 2

I am trying to create table rows based on a selection the user makes. In some cases I need x rows where x is the length of an array, other times x represents the largest number rows that will be needed to display n number of arrays.

Ex: image1 is built based on 4 different arrays all which vary in size image2 is built from the same array and is doubled in this case.

<div data-bind="if: selectedTab()">
<table>
<thead>
  <tr>
    <td>
      <div class="a-i-post-All"></div>
    </td>
    <!-- ko foreach:$root.selectedTab().races-->
    <td>
      <input type="checkbox" />
    </td>
    <!-- /ko -->
  </tr>
</thead>
<tbody data-bind="foreach: selectedTab().runners"> // <-- This is an empty array created by the max number of Runners in the selectedTabs array of Races
  <tr>
    <td>
      <div class="a-i-post"></div>
    </td>
    <!-- ko foreach:$root.selectedTab().races-->
    <td>
      <!-- ko if: Runners.length > $parentContext.$index()-->
      <input type="checkbox" />
      <!-- /ko -->
    </td>
    <!-- /ko -->
  </tr>
</tbody>

The above works fine and creates what i want, but i don't like having to turn selectedTab.runners from a number into an empty array just to make it loop n times to create the rows. I am open for suggestions. Note As of the time I posted this question originally I have revised this code considerably and am now down to only one occurrence related to my initial question.

• javascript
• knockout.js
• knockout-2.0

• Why don't you want to use foreach with $index? – Judah Gabriel Himango Commented Apr 18, 2013 at 17:52
• I want to be able to foreach on a number rather than an array – Zholen Commented Apr 18, 2013 at 17:53
• 2 This is not really what Knockout is for. I'm trying to think of a real world example where you would need to repeat something a defined x number of times in JavaScript, where it couldn't simply be done server-side when the view is first generated. I'm at a loss. Perhaps, if you actually told us what you're really trying to do, someone can show you a better way. – Chris Pratt Commented Apr 18, 2013 at 18:11
• Yeah, the problem is that each instance of the loop has no data to bind to since it doesn't actually exist. – Rich Commented Apr 18, 2013 at 18:34

3 Answers 3

My Repeat binding does exactly this.

<tbody>
  <tr data-bind="repeat: { foreach: selectedTab().runners, index: '$runner' }">
    <td>
      <div class="a-i-post"></div>
    </td>
    <td data-bind="repeat: selectedTab().races">
      <!-- ko if: $item().Runners.length > $runner -->
      <input type="checkbox" />
      <!-- /ko -->
    </td>
  </tr>
</tbody>

You can create an Array object:

  <!-- ko foreach: new Array(the_length_you_need) -->
       <span>&#9733;</span>
  <!-- /ko -->

This will print a star for the_length_you_need times

You can do something like this:

<div data-bind="foreach: [0,0,0,0,0]">
    <span data-bind="text: $index"></span>
</div>

And you'll get elements 0-4.

But, as Chris said in the comments, this seems strange. Tell us what you're trying to do, and we'll point you in the right direction.