Question

我使用twitter bootstrap和knockoutjs，我希望每隔6个项目在行div中包含col 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>

我尝试使用$ index（）方法和if语句，但我失败了。有人知道如何实现这个目标吗？

Answer 1

我会考虑使用虚拟元素来执行此操作：

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

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

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

Answer 2

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

在模型中：

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

        return indexes;
    };

在模板中：

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

目前它对我来说效果很好。

Answer 3

只是一个想法。对于您想要实现的目标，这似乎过于复杂？

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

在您的视图中会严重避免复杂的代码语句，因此难以调试。

建议：

<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中将其拆分。

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

3 个答案: