Question

我有一个使用ProcessClick函数绑定到视图模型的外部div，并且运行时的内部div绑定到不同的视图模型，但具有相同的click函数名称。出于某种原因，只有外部模型的函数也会在内部VM函数执行之前被调用。

标记：

<div id="max-outer">
   <span data-bind="click: BindInner">Bind Inner</span>
    <br/>
    <br/>
   <span data-bind="click: ProcessClick">Outer</span>
   <div id="max-inner">
      <span data-bind="click: ProcessClick">Inner</span>
       <br/>
   </div>
</div>

JS：

function InnderModel() {
    self = this;

    self.ProcessClick = function () 
        {
            alert("Inner clicked");
        };
}

function OuterModel() {
    self = this;

    self.ProcessClick = function (){
            alert("Outer clicked");
        };

    self.BindInner = function () {
        ko.cleanNode(document.getElementById("max-inner"));
        ko.applyBindings(new InnderModel(), document.getElementById("max-inner"));
    };
}

ko.applyBindings(new OuterModel(), document.getElementById("max-outer"));

这是一个小提琴： http://jsfiddle.net/mpavlov/H2ZnV/8/

一个想法是单击Bind inner并单击Inner span仅显示“Inner Clicked”警报，而不是两者。这可以通过某种方式实现吗？

Answer 1

第一次调用applyBindings时，内部跨度将被绑定。
调用ko.cleanNode实际上并不删除任何事件处理程序，因此它仍将具有原始处理程序。

您可以使用的一种技术是：http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html。

这允许您识别希望Knockout跳过绑定的区域。

您可以在您最不想要绑定的部分添加一个简单的自定义绑定：

ko.bindingHandlers.stopBinding = {
    init: function() {
        return { controlsDescendantBindings: true };
    }
};

就像：http://jsfiddle.net/rniemeyer/Tmz8m/

将内部div绑定到具有相同属性的不同knockoutJS视图模型

1 个答案: