Question

使用以下自定义绑定我收到以下内容，我无法弄清楚原因。

版本 Knockout JavaScript库v3.2.0

您不能多次将绑定应用于同一元素。

装订

ko.bindingHandlers.foreachArraySplice = {
    init: function (element, valueAccessor, allBindings) {
        var value = ko.unwrap(valueAccessor());
        var columns = allBindings.get('columns') || 1;

        /* Split the array into splices */
        var len = value.length;
        var splitArray = [];
        var i = 0;
        while (i < len) {
            var size = Math.ceil((len - i) / columns--);
            splitArray.push(value.slice(i, i + size));
            i += size;
        }
        /*\Split the array into splices */
        ko.cleanNode(element); // Last attempted fix...
        ko.applyBindingsToNode(element, {
            foreach: splitArray
        });
    }
};

用法

<div class="row" data-bind="foreachArraySplice: anArray, columns: 5">
  <div class="col-md-2" data-bind="foreach: $data, css: { first: $index == 0, last: $index == $data.length }">
    <div class="input-group" style="margin-bottom: 5px;">
      <input class="form-control input-sm" type="text" data-bind="value: $data.key" readonly>
    </div>
  </div>
</div>

推理

简而言之，我需要获取一组对象（100s）并在页面上显示它们。我使用bootstrap所以我想我会创建一个绑定处理程序，它接受数组并根据columns绑定将其拼接到数组中的较小数组中，并在我的视图中整齐地显示它们，如上所示。

数组总是变化所以我希望它尽可能是动态的，但上面的代码导致上述错误。为简洁起见，我没有包含我的viewModel，因为它是一个带有包含对象的可观察数组的标准模型。

Answer 1

你需要告诉knockout你的绑定处理程序将控制后代元素的绑定。从您的applyBindingsToNode()调用到正常的淘汰赛处理，它们实际上会被淘汰两次。

您可以通过使init()函数返回controlsDescendantBindings属性设置为true的对象来实现此目的。更多关于in the documentation。

ko.bindingHandlers.foreachArraySplice = {
    init: function (element, valueAccessor, allBindings) {
        // ...
        return { controlsDescendantBindings: true };
    }
};

Knockout - 自定义foreach绑定多次将绑定应用于同一元素

1 个答案: