- 首页
- 前端开发
- 使用淘汰赛 foreach 每 2 条记录创建新行
使用淘汰赛 foreach 每 2 条记录创建新行
[英] Create new row every 2 records using knockout foreach
本文介绍了使用淘汰赛 foreach 每 2 条记录创建新行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用剔除虚拟元素每两条记录创建一个新行.我的问题是奇数记录不会在两个偶数索引之间生成.
这是我的源 HTML
<!--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>
<!--ko if:$index%2()!=0 &&$index()!=0-->
<!--/ko--><!--/ko-->
输出 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>
<!--ko if:$index%2()!=0&&$index()!=0-->
<!--/ko--><!--ko if:$index()%2==0 ||$index()==0--><!--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>
<!--ko if:$index()%2!=0&&$index()!=0-->
<!--/ko--><!--/ko-->
无论条件如何，都应该生成面板.条件仅决定在偶数上打开新行并在奇数上关闭行.
解决方案
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><!--ko if:$index()%2!=0-->
<!--/ko--><!--/ko-->
div 中的关闭和打开虚拟标签被 Knockout 忽略.所以上面的只是有输出每隔一个项目的效果.
这是在 Knockout 中对数组项进行分组的一个很好的答案:https://stackoverflow.com/a/10577599/1287183
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.
Here's my source 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-->
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-->
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.
Here is a good answer for doing grouping of array items in Knockout: https://stackoverflow.com/a/10577599/1287183
这篇关于使用淘汰赛 foreach 每 2 条记录创建新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
