javascript - 在 Knockout JS foreach 循环中围绕每个 'n' 项放置一个容器

Question

我想使用 knockout 的 JS foreach 循环构建以下 HTML...

<div>
  <div>
    <article></article>
    <article></article>
    <article></article>
  </div>
  <div>
    <article></article>
    <article></article>
    <article></article>
  </div>
</div>

...其中每个“文章”都是数组中的一个项目。

我已经尝试了以下，这在逻辑上似乎是合理的，但它不起作用 - 我假设 knockout 被评论中的不平衡标签弄糊涂了......

<div data-bind="foreach: articles()">
  <!-- ko: if ($index() % 3 == 0)
    <div>
  <!-- /ko -->

    <article></article>

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

任何关于如何实现这一目标的想法都将不胜感激!

Answer 1

在处理类似问题时，我的看法一直是 View 模型的结构必须尽可能接近 View ，这样您就不会在 View 本身中执行逻辑。因此，对文章数组进行分组的地方是在 View 模型中使用 ko.computed 来构建如下结构:

groupedArticles = [
    [article1, article2, article3],
    [article4, article5, article6]
]

那么在你看来你可以这样做:

<!-- ko foreach: groupedArticles -->
<div>
    <!-- ko foreach: $data -->
    <article></article>
    <!-- /ko -->
</div>
<!-- /ko -->

让我知道这是否有意义；如果没有，我可以尝试添加一个 fiddle 来演示它。

更新

我找到了一个使用这种模式的 fiddle 。我需要将 KO 升级到最新版本才能使其正常工作，您现在可以尝试使用它:http://jsfiddle.net/hFPgT/160/

这是来自问题，How to get Knockout to group foreach

相关代码为:

this.grouped = ko.computed(function () {
        var rows = [], current = [];
        rows.push(current);
        for (var i = 0; i < this.items.length; i += 1) {
            current.push(this.items[i]);
            if (((i + 1) % 4) === 0) {
                current = [];
                rows.push(current);
            }
        }
        return rows;
}, this);