Knockout js if in Durandal

Question

For the life of me I can not figure out why this is not working. I'm trying to wrap every two products in a div. The first product works great but the second does not bind the data

<div  class="prods" data-bind="foreach: products">
    <!-- ko if: $index()%2 == 0 -->
        <div class="prodset">
            <div class="paneProduct">
                <div class="title" data-bind="html: product_title"></div>
                <div data-bind="html: $index()"></div>
            </div>
    <!-- /ko -->
    <!-- ko if: $index()%2 == 1 -->
            <div class="paneProduct">
                <div class="title" data-bind="html: product_title"></div>
                <div data-bind="html: $index()"></div>
            </div>
        </div>
    <!-- /ko -->
</div>

Any idea where I am going wrong

Answer 1

One problem is the placement of of the start and end tags of either the <!-- ko --> or the <div class="prodset"> because the way it stands at the moment it wont render correct HTML with an opening and closing div tags

http://jsfiddle.net/gonefishern/ALBGQ/

Answer 2

The comments/answers already tell you where you're going wrong - @michael-best has explained this well on the other question.

To achieve what you're trying to do, you'd be best off splitting your data up into pairs, and then binding the pairs to your view. If each individual product has the same HTML, you'd also be best off using a template binding. Here's a JSBin that shows one way to achieve this.