Javascript 敲除自定义bindingHandler无法对附加元素应用绑定

我正在尝试使用一个自定义bindingHandler，它添加了类似模板的内容，因此需要自己的模型。 仅供参考（但不需要了解问题）：真正的目标是管理位于具有此bindingHandler的DIV内部的几个组件

但是，我无法创建自定义上下文，但阻止KO尝试绑定我创建的元素（并且已经使用自定义bindingHandler对其应用了绑定）

我得到的只是一个典型的错误： 未捕获错误：不能对同一元素多次应用绑定。

会发生什么？ 我猜是这样的：

• Knockout正在执行第一个applyBinding，并在其中的元素上搜索绑定处理程序

• 它执行它的初始化过程

• 初始化将使用新元素上的ApplyBinding创建一个新上下文

• 在该操作完成后，knockout似乎没有考虑已创建元素（以及已绑定的元素）上的“allowBindings:false”，并尝试绑定两次

代码（JSFIDLE）

---

从customComponent

init

函数返回

{ControlsDescentBindings:true}

看

以下是您的小提琴的更新：

除了添加

ControlsDescentBindings

返回值外，我还做了以下更改：

• 已删除

  allowBindings:false

• 修复了本应为

  data bind=“text:data”

  的

  data=“text:data”

• 将新元素的

  ko.applyBindings

  更改为

  ko.applybindingstosubstands

  ，这在这种情况下更常用

<div id="view">
    viewModel content.
    <p data-bind="text:data"></p>
    <div data-bind="customComponent:{}">
        <p>Need to have is own model. Another element is added while the constructor of the viewModel is instancied.</p>
    </div>
</div>

ko.bindingHandlers.allowBindings = {
    init: function (elem, valueAccessor) {
        // Let bindings proceed as normal *only if* my value is false
        var shouldAllowBindings = ko.unwrap(valueAccessor());
        return { controlsDescendantBindings: !shouldAllowBindings };
    }
};

ko.bindingHandlers.customComponent = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            // Append new element
            var $component = $('<div data-bind="allowBindings:false">customComponent content: <span data="text:data"></span><div>').appendTo($(element));
            // Apply bindings on newly created element
            console.log('2.A. customComponent -> applyBindings -> started');
            ko.applyBindings({
                data: 'COMPONENT MODEL DATA'
            }, $component[0]);
            console.log('2.A. customComponent -> applyBindings -> completed');
        }
};

console.log('1.A. view -> applyBindings -> started');
ko.applyBindings({
    data: 'VIEW MODEL DATA'
}, $('#view')[0]);
console.log('1.B. view -> applyBindings -> completed');

 init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        //...
        // Template creation
        var $template = $('<ul></ul>').prependTo($(element));

        Quadratus.ko.dataBind($template, {
            foreach: 'panel.list'
        });
        $('<li><span data-bind="text:\'hello\'"></span></li>').appendTo($template);

        ko.applyBindings(bindingContext.createChildContext(model), $template[0]);

        $template.siblings().each(function () {
            // Apply current bindingcontext on siblings
            ko.applyBindings(bindingContext, this);
        });
 return { controlsDescendantBindings: true };