javascript - Knockoutjs 在尝试创建一系列无序列表时抛出异常

Question

我正在尝试创建一系列 <ul>使用 foreach: 的标签语境。目标是迭代列表，并启动一个新的 <ul>每第 4 项。到目前为止我的代码是:

<ul data-bind="foreach: Areas">
   <li><span>
      <input type="checkbox" data-bind="value: AreaId, checked: $root.AreasImpacted" />
      <label><span data-bind="text: Name"></span></label>
   </span></li>

   <!-- ko if: ($index() % 4 == 0) -->
   </ul><ul>
   <!-- /ko -->
</ul>

当我这样做时，我得到了异常:

Microsoft JScript runtime error: Cannot find closing comment tag to match: ko if: ($index() % 4 == 0)

似乎不喜欢</li><li> if内的内容注释 block ，可能是因为 DOM 解析器正在摸索如何实际解析这个。如果我将其更改为:

<!-- ko if: ($index() % 4 == 0) -->
<li>Fake!</li>
<!-- /ko -->

然后它就会完美地工作(也就是说，每第 4 个元素创建一个假 <li>。

我也对实现这一目标的其他想法持开放态度。谢谢!

Answer 1

是的，初始 DOM(在 Knockout 激活之前)是非法的，Knockout 并不是通过将 HTML 粘贴到 DOM 中来工作的，它实际上将其复制到一个 javascript DOM 对象中，然后将其插入到 DOM 中。 </ul><ul>不是合法对象，因此 Knockout 无法将其转换为模板。即使可以，foreach装订原件<ul> ，不是由if启动的新的，因此添加元素的 Knockout 代码仍将在第一个列表上运行。

所以，总而言之，Knockout 的 foreach和template绑定(bind)不能通过像字符串一样构建 HTML 来工作。

您将需要一个更复杂的解决方案。

Something like this会起作用，但我不知道这是否仍然是您想要的:

<!-- ko foreach: { data: chunkedList, as: 'areas' } -->
<span>SPLIT!</span>
<ul data-bind="foreach: areas">
    <li><span data-bind="text: name"></span></li>
</ul>
<!-- /ko -->

var Viewmodel = function(data) {
    var self = this;
    self.items = ko.observableArray(data);
    self.chunkedList = ko.computed(function() {
        var result = [];
        var chunk = [];
        self.items().forEach(function(item, index) {
            if (index % 4 === 0) {
                chunk = [];
                result.push(chunk);
            };
            chunk.push(item);
        });
        return result;
    });
};