Question

I want to create a 3×3 grid with images loaded using knockout binding

<fieldset class="ui-grid-b" data-bind="foreach: Icons">
 <div>
    <img alt="" src="../res/placeholder.png" style="width: 80px; height: 80px" />
 </div>
</fieldset>

The Images property is from the view model and it is loaded asynchronously by a ajax call.

I need to set the div for each image like this:

for 1st div: <div class="ui-block-a" />
for 2nd div:<div class="ui-block-b" />
for 3rd div:<div class="ui-block-c" />
for 4th div:<div class="ui-block-a" />
for 5th div:<div class="ui-block-b" />
for 6th div:<div class="ui-block-c" />
…

so the class name is “ui-block-” + div_index % 3

the problem is I do not know how to set the class name.
i tried using a computed observable but i cannot get the actual object(the icon model) in order to be able to return an Icons.IndexOf(icon) % 3

Answer 1

Using Knockout 2.1 inside a foreach you have access to the $index variable.

<div data-bind="attr: {'class': $root.indexLetter($index())}">

Create a method in your ViewModel like this:

viewModel.indexLetter = function(index) {
    var abc = 'abc';
    return 'ui-block-' + abc.charAt(index % 3);
}