Knockout 'for' binding?

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.

enter image description here

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

I want to be able to foreach on a number rather than an array — Zholen, Apr 18 '13 at 17:53
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, Apr 18 '13 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, Apr 18 '13 at 18:34

Michael Best · Accepted Answer · 2013-04-19T00:20:19.057

13

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>

edited Apr 19 '13 at 00:20

answered Apr 19 '13 at 00:01

Michael Best

16,623
1
37
70

Thank you for addressing my initial question. This does seem to do what I want but at this time I have re-factored my code and may not need to handle such actions anymore, less I use it for performance reasons. – Zholen Apr 19 '13 at 00:42
That looks really interesting Michael! – Joel Cochran Apr 19 '13 at 12:56

score 6 · Answer 2 · answered Apr 21 '16 at 17:16

6

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

answered Apr 21 '16 at 17:16

Leo Kolezhuk

346
3
7

score 4 · Answer 3 · answered Apr 18 '13 at 20:17

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.

Knockout 'for' binding?

3 Answers3

Linked