Javascript 在每个'周围放置一个容器；n'；淘汰JS foreach循环中的项目

我想使用敲除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>

---

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

在处理类似问题时，我的看法一直是视图模型的结构必须尽可能靠近视图，这样您就不会在视图本身中执行逻辑。因此，对文章数组进行分组的地方是在viewmodel中使用

ko.computed

来构建如下结构：

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

在您看来，您可以执行以下操作：

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

这是来自于这个问题,

有关守则如下：

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);

this.grouped=ko.computed（函数（）{
变量行=[]，当前=[]；
行。推送（当前）；
对于（变量i=0；i
像@sifriday一样，我会选择一个单独的计算数组，将其命名为
articleGroups
（或view）。在我最近对Knockout的理解中，我发现将所有与视图相关的逻辑（这里是：分组）放在组件的viewModels中是最方便的，所以我在这里为它构建了一个组件。
另一个好处是，您可以在视图中传递参数；例如，使用“groupBy”的不同值尝试下面的代码段


//设置
var条款=[]；
对于（变量i=0；i<50；i++）
推送（{i:i+1，文本：“文本”}）；
//listview组件
ko.components.register（'article-view'{
viewModel:函数（参数）{
var groupBy=this.groupBy=ko.observable（参数groupBy）；
this.articleGroups=ko.computed（函数（）{
var result=[]，group=groupBy（）；
ko.utils.arrayForEach（ko.unwrap（参数数据）、函数（项、索引）{
如果（索引%group==0）
结果.推送（[项目]）；
其他的
结果[result.length-1]。推送（项目）；
});
返回结果；
});
},
模板：{element:'article group'}
});
//视图模型实例化
VM={文章：ko.observearray（文章）}；
ko.应用绑定（VM）
body>div>div>div{边框底部：1px纯灰色；填充底部：10px；}

虽然这样做有效，但并不美观，因为它将显示逻辑与数据混合在一起。您能解释更多吗？毕竟，视图模型并不完全是一个模型。它是一个适合在视图中渲染的结构的模型。因此，根据它的定义，它是将显示逻辑与数据混合在一起的地方。如果要获得更多的分离，请务必使用单独的模型，然后使用视图模型和视图。像knockback这样的框架可以做到这一点。根据MVVM范式，数据应该存储在模型中，修改以供视图模型查看，并由视图显示。因此，正确的方法是使用一个单独的模型，然后在视图模型中使用该数据。视图模型公开要绑定到视图的属性，是混合显示逻辑的地方。你还想在哪里做呢？我也遇到了同样的问题，只是有一个
thead
和
tbody
，我显然只想创建一次，基于$index（）。KO只能处理格式良好的元素。请注意，在绑定中使用括号将从视图中的数据绑定中删除自动更新：
foreach:articles（）
。只需进入每个文章的
foreach:articles
。