我试图显示来自迭代列表的元素,这些元素在divs中以3乘3的方式分组。我使用了$index
的值,但我不知道为什么看起来不正确。
<div class="row" data-bind="foreach: displaySel">
<div class="col-md-2">
<!--ko if: $index() % 3 === 0-->
<div data-bind="attr:{id: 'div_'+$index()}">
<!--/ko -->
<div data-bind="attr:{id: 'g_'+$data.hId}" style="position:relative;">
<div>other things here</div>
</div>
<!--ko if: ($index() % 3 === 2 || $index() === displaySel.length - 1)-->
</div>
<!--/ko -->
</div>
</div>
第一个div应该在第一个元素信息之前打开,在第三个元素信息之后关闭。第二个div应该在第四个元素信息之前打开,在另外三个元素信息之后关闭,以此类推,直到列表结束。这里最好的方法是什么?
1条答案
按热度按时间piah890a1#
你不能(或者不应该,我忘记了)以命令式的方式使用Knockout,在这种情况下,你需要手动生成或不生成开始/结束标记。
换句话说,将
<!-- ko if: ... -->
和<!-- /ko -->
视为适当的结束/结束标记,它们总是需要环绕 full 元素。换句话说,您尝试执行的是以下等效操作:
也许Knockout应该给你一个错误,但是(我想在HTML的精神)它试图最好的利用它。
因此,您应该在视图模型中执行“分组”逻辑。额外的好处是,您还可以对其进行单元测试。下面是一个示例:
第一个