4

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

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

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

4

2 回答 2

8

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

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

于 2013-08-09T23:25:44.690 回答
0

你最好提供一个多维数组的淘汰赛。这是一个更清洁的解决方案，并且不太可能产生古怪的结果。

查看示例 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>
于 2015-11-10T18:31:47.780 回答