Twitter bootstrap div使用knockout foreach循环包装每个特定索引

我使用TwitterBootstrap和knockoutjs，我希望每隔6个项目将col div包装在row div中，就像这样

<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
</div>
<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
</div>

以下是我的淘汰模板：

//elements contain more than 6 items
<div id="main" data-bind="foreach: elements">
  <div class="col-md-2"></div>
</div>

//元素包含6个以上的项

我尝试使用$index（）方法和if语句，但失败了。

---

有人知道如何实现这一点吗？

我会考虑使用虚拟元素来实现这一点：

<div class="row">
<!-- ko foreach: elements-->

<!-- ko if: index() % 6 === 0 -->
</div>
<div class="row">
<!-- /ko -->

    <div class="col-md-2"></div>
<!-- /ko -->
</div>

---

我找到了另一种方法来实现这一点。这是：

在模型中：

 self.groupedElementsIndexs = function () {
        var indexes = new Array();
        for (var i = 0; i < self.elements().length; i = i + 6) {
            indexes.push(i);
        }

        return indexes;
    };

self.GroupedElementsIndex=函数（）{
var索引=新数组（）；
对于（变量i=0；i

在模板中：

<div data-bind="foreach: groupedElementsIndexs()">
        <div class="row" data-bind="foreach: $parent.elements.slice($data, $data + 6)">

---

就目前而言，它对我来说效果很好。

只是一个想法。对于你想要实现的目标来说，这似乎过于复杂了

欣赏这可能是演示代码熟悉技术

在您看来，这将严重避免复杂的代码语句，因为它们很难调试

建议：

<div class="row">
<!-- ko foreach: elements1-->
<div class="col-md-2"></div>
<!-- /ko -->
</div>

<div class="row">
<!-- ko foreach: elements2-->
<div class="col-md-2"></div>
<!-- /ko -->
</div>

---

编写代码，在viewModel中将其拆分。

我尝试过，但没有成功。我收到消息：找不到要匹配的结束注释标记：ko foreach:elements。目前我找到了另一种方法。我会加上它作为回答我猜它不喜欢两个虚拟元素排成一行，我会想一想，只是想一想。这对于您试图实现的目标来说似乎过于复杂？？没错，但是您如何创建元素1和元素2呢？因为元素的数量可能会有所不同。。。