使用淘汰赛 foreach 每 2 条记录创建新行答案

【问题标题】：Create new row every 2 records using knockout foreach使用淘汰赛 foreach 每 2 条记录创建新行
【发布时间】：2013-08-11 23:14:14
【问题描述】：

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

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

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

【问题讨论】：

html 源代码第八行大括号 () 输入错误。
我实际上已经看到了，只是忘了编辑这篇文章。截至目前已编辑。
如果我想每 3 个项目做一次，会怎样？

标签： javascript html css knockout.js

【解决方案1】：

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

<!--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 忽略。所以上面只是有输出其他所有项目的效果。

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

【讨论】：

同样x%2==0 || x==0 等价于x%2==0 因为0%2 总是0。
确实如此。谢谢迈克尔的澄清。我知道一旦我测试了代码，这将不起作用，但我想确保它是因为符号。

【解决方案2】：

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

查看示例 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>

【讨论】：