使用敲除foreach每隔2条记录创建一个新行

Create new row every 2 records using knockout foreach

本文关键字：新行 一个 创建 记录 foreach 2条 每隔      更新时间：2023-09-26

我正试图使用淘汰虚拟元素，每两条记录创建一个新行。我的问题是奇数记录不会在两个偶数索引之间生成。

这是我的源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>

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

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

Knockout会忽略div中的关闭和打开虚拟标记。因此，以上只是输出其他项目的效果。

以下是在Knockout中对数组项进行分组的好答案：https://stackoverflow.com/a/10577599/1287183

您最好使用多维数组提供knockout。这是一个更清洁的解决方案，不太可能产生奇怪的结果。

查看示例2：注意3：在文档中：http://knockoutjs.com/documentation/foreach-binding.html

<ul data-bind="foreach: { data: categories, as: 'category' }">
    <li>
        <ul data-bind="foreach: { data: items, as: 'item' }">
            <li>
                <span data-bind="text: category.name"></span>:
                <span data-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>
相关文章：