Create New Row Every 2 Records Using Knockout Foreach

I'm attempting to create a new row every two records using knockout virtual elements. My problem is that the odd record does not generate in between the two even indexes. Here's my

Solution 1:

Knockout binding only happen on elements, and virtual elements must also adhere to the element hierarchy. If we take your example and use indentation to show the element relation, it looks like this:

<!--ko foreach:UDGroupboxes--><!--ko if:$index()%2==0--><divclass="row-fluid"><!--/ko--><divclass="panel form-horizontal span6"><divclass="panel-heading"><spandata-bind="text:$data.Caption"></span></div></div><!--ko if:$index()%2!=0--></div><!--/ko--><!--/ko-->

The closing and opening virtual tags within the div are ignored by Knockout. So the above just has the effect of outputting every other item.

Here is a good answer for doing grouping of array items in Knockout: https://stackoverflow.com/a/10577599/1287183

Solution 2:

You're better off supplying knockout with a multi-dimensional array. This is a much cleaner solution and has less potential for quirky results.

Look at Example 2: Note 3: in the documentation: http://knockoutjs.com/documentation/foreach-binding.html

<uldata-bind="foreach: { data: categories, as: 'category' }"><li><uldata-bind="foreach: { data: items, as: 'item' }"><li><spandata-bind="text: category.name"></span>:
                <spandata-bind="text: item"></span></li></ul></li></ul><script>var viewModel = {
    categories: ko.observableArray([
        { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] },
        { name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] }
    ])
};
ko.applyBindings(viewModel);
</script>