使用knockout foreach每2条记录创建一个新行

Question

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

这是我的源HTML

   <!--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

<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>

无论条件如何,都应该生成面板.条件仅确定在偶数上打开新行并在赔率上关闭行.

Answer 1

Knockout绑定仅发生在元素上,虚拟元素也必须遵循元素层次结构.如果我们采用您的示例并使用缩进来显示元素关系,它看起来像这样:

<!--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-->

divKnockout会忽略其中的关闭和打开虚拟标记.所以上面只是输出其他所有项目的效果.

这是在Knockout中对数组项进行分组的一个很好的答案:https://stackoverflow.com/a/10577599/1287183