KnockoutJS foreach 如果

【问题标题】：KnockoutJS foreach ifKnockoutJS foreach 如果
【发布时间】：2014-01-14 12:37:32
【问题描述】：

我该怎么做：

<div class="boxes-container">
<!-- ko foreach: Items -->
  <!-- ko if: DisplayCount < @itemsCount -->
     @Html.Raw("</div><div class='boxes-container'>")
     @{ itemsCount = 0;}
  <!-- /ko -->
   .....
<!-- /ko -->
</div>

现在它返回此错误：错误：找不到要匹配的结束注释标记：ko foreach：项目

【问题讨论】：

为什么需要这样做？你不能用jsfiddle.net/4CSjK这样的东西来做吗？
不，我不能，因为我在 div（boxes-container）中绘制元素，当我达到一定数量的元素时，我必须关闭该容器并开始一个新的...

标签： html asp.net-mvc-4 razor knockout.js

【解决方案1】：

我创建了一个fiddle，它可能是一个解决方案，其中Grouped 是一个计算值，因此即使Items 是一个observableArray，它也可以工作。

var VM = function () {
    var self = this;
    self.Items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    self.DisplayCount = 3;
    self.Grouped = ko.computed(function () {
        var groups = [];
        for (var index = 0; index < self.Items.length; index = index + self.DisplayCount) {
            groups.push(self.Items.slice(index, index + self.DisplayCount));
        }
        return groups;
    });    
};

并查看

<!-- ko foreach: Grouped -->
<div class='boxes-container'>
<!-- ko foreach: $data -->
    <span data-bind="text: $data"></span>
<!-- /ko -->
</div>
<!-- /ko -->

See fiddle

【讨论】：