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

【问题标题】：Bind inner div to different knockoutJS view model with the same properties将内部 div 绑定到具有相同属性的不同 knockoutJS 视图模型
【发布时间】：2012-10-15 23:18:59
【问题描述】：

我有一个外部 div，它绑定到具有 ProcessClick 函数的视图模型，而运行时的内部 div 绑定到不同的视图模型，但具有相同的单击函数名称。出于某种原因，只有外部模型的函数也会在内部 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”警报，而不是两者。这可以通过某种方式实现吗？

【问题讨论】：

标签： knockout.js

【解决方案1】：

第一次调用applyBindings 时，内部跨度将被绑定。

调用ko.cleanNode实际上并没有删除任何事件处理程序，所以它仍然有原来的处理程序。

knockmeout.net 上的此技巧中描述了您可以使用的一种技术。

这使您可以确定希望 Knockout 跳过绑定的区域。

您将在您原本不想绑定的部分上添加一个简单的自定义绑定：

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

如this fiddle所示。

【讨论】：