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.
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.
Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.
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 .
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.
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>★</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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With