knockout.js - 如何使用 Bootstrap 样式的挖空循环遍历 Twig 中的数据？

Question

这必须是唯一的 :p

我在 symfony2 中使用 twig。我正在使用 bootstrap 流体布局来设计它。看哪，我正在使用 knockout 循环遍历数据，连续 4 个 (span3)(每第 5 个将换行)。但我不知道如何识别每 4 次迭代。

<div class="row-fluid">
    <div class="structureWhite clearfix" data-bind="foreach: stores">
        <div class="span3">
            <h5 data-bind="text: name"></h5>
            <p data-bind="text: address"></p>
            <p data-bind="text: contact"></p>
        </div>
    </div>
</div>

所以我要么需要输入 <div class="row-fluid"></div>每 4 次迭代后或每 5 次删除边距。问题是 bootstrap 没有给出第一个 span3 的边距，但其余的都得到 margin-left: 2.12766%。这意味着第 5 个 span3(第二行的第一个)超出了范围。

所以我要么必须将它拆分为流式行，要么移除第 5 个元素(或每 4 个元素之后)的填充，或者向第一个元素添加边距(尽管它会响应如此可变)。任何建议表示赞赏。

Answer 1

KO 2.1 现在包含一个 $index 上下文变量，您可以在 foreach 中访问该变量以获取当前项目的索引。

它是一个可观察对象，因此如果您在表达式中使用它，您需要像这样使用它:

<!-- ko if: $index() % 4 === 3 -->
<div>some element</div>
<! /ko -->