knockout.js - knockoutjs - 区分从 2 视图模型获取绑定的按钮上的单击事件

Question

我在每个 div 中有两个嵌套的 div 和 2 个按钮：

<div id="d1">
    <button data-bind="click:x">
        invoke x
    </button>
    <div id="d2">
        <button id="Q_btn" data-bind="click:x">
            invoke x
        </button>
    </div>
</div>

和2个视图模型绑定为：

var viewModel1 = {
    x : function() {
        alert('from model1')
    }
}

var viewModel2 = {
    x : function() {
        alert('from model2')
    }
}

ko.applyBindings(viewModel2, document.getElementById('d2'));
ko.applyBindings(viewModel1, document.getElementById('d1'));

现在，当我单击 d2 (Q_btn) 内的按钮时，会发出 2 个警报，第一个说“来自 mode2”，第二个说“来自 model1”。我希望当我点击 Q_btn 时只发生第一个警报。

注意：在我的项目中，我在 div 上加载了一些 html 页面。每个 div 都有自己的视图模型。直到现在一切正常（每个 div 都使用自己的视图模型并且没有发生冲突）但是在嵌套 div 的情况下会发生上述问题。

我感谢您的帮助

Answer 1

我认为没有任何方法可以按照您建议的方式做您想做的事情。我建议你看看在这里实现一个发布者/订阅者模式，或者滚动你自己的（使用类似jquery.pubsub的东西），或者你可以使用一个名为knockout- postbox的扩展。

这将使您能够很好地解耦视图模型，同时允许它们相互通信。