使用knockout foreach每2条记录创建一个新行 [英] Create new row every 2 records using knockout foreach

问题描述

我试图使用knockout virtual元素每两个记录创建一个新行。我的问题是奇数记录不会在两个偶数索引之间生成。

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.

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

输出HTML

The output HTML

<div data-bind="attr:{id:Name}" class="tab-pane active" id="Tabsheet1">
    <!--ko foreach:UDGroupboxes-->
    <!--ko if:$index()%2==0 || $index()==0-->
    <div class="row-fluid">
    <!--/ko-->
        <div class="panel form-horizontal span6">
            <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div>
        </div>
     <!--ko if:$index%2()!=0&&$index()!=0-->
    </div>
    <!--/ko-->

    <!--ko if:$index()%2==0 || $index()==0--><!--/ko-->

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

无论条件如何，都应生成面板。

The panel should be generated no matter the condition. The condition only determines to open a new row on even numbers and close the row on odds.

推荐答案

敲除绑定只发生在元素上，并且虚拟元素也必须遵守元素层次结构。如果我们以你的例子并使用缩进来显示元素关系，它看起来像这样：

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-->
        <div class="row-fluid">
            <!--/ko-->
            <div class="panel form-horizontal span6">
                <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div>
            </div>
            <!--ko if:$index()%2!=0-->
        </div>
    <!--/ko-->
<!--/ko-->

div 被Knockout忽略。

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.

这里是一个很好的答案，在Knockout中做数组项的分组：http://stackoverflow.com/a/10577599/1287183

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

这篇关于使用knockout foreach每2条记录创建一个新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！