Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Knockout 'for' binding?

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

like image 581
Zholen Avatar asked Apr 18 '13 17:04

Zholen


People also ask

What are Knockout bindings?

Enabling and Disabling Input Elements Knockout provides built-in bindings to enable and disable input elements. The enable binding will enable the input element if the property it's bound to evaluates to true, and will disable the element if it evaluates to false.

What is Knockout used for?

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.

How do you bind a function in knockout JS?

The function you want to bind to the element's click event. You can reference any JavaScript function - it doesn't have to be a function on your view model. You can reference a function on any object by writing click: someObject. someFunction .

What activates the Knockout?

To activate Knockout, add the following line to a <script> block: ko. applyBindings(myViewModel); You can either put the script block at the bottom of your HTML document, or you can put it at the top and wrap the contents in a DOM-ready handler such as jQuery's $ function.


3 Answers

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>
like image 144
Michael Best Avatar answered Nov 07 '22 12:11

Michael Best


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

like image 38
Leo Kolezhuk Avatar answered Nov 07 '22 11:11

Leo Kolezhuk


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.

like image 4
Judah Gabriel Himango Avatar answered Nov 07 '22 11:11

Judah Gabriel Himango