KnockoutJS 中 ViewModel 之间的通信

Question

我正在尝试在 knockoutjs 驱动的应用程序中实现我的视图模型之间的通信。我使用 yeoman 工具搭建了它的脚手架，如您所见，它使用 AMD:

define(['knockout', 'signals', 'text!./nav-bar.html'], function(ko, Signal, template) {

    function NavBarViewModel(params) {
        this.route = params.route;
    }

    return { viewModel: NavBarViewModel, template: template };

});

我必须定义一个对象，我以后会用它来调度事件，对吗？类似的东西：

var EventDispatcher = {
    itemClicked: new Signal()
};

然后，每当 NavBarViewModel 中发生某些事情时，我想做的是：

EventDispatcher.itemClicked.dispatch();

问题是 - 我应该把这个 EventDispatcher 放在哪里？很明显，它应该是某种全局对象，这样每个 VM 都可以控制它，但这会很丑陋。我想到了依赖注入，因为我选择的这个架构中的所有其他内容都是以这种方式完成的，但是如何实现呢？我来自 WPF, MVVM 世界，到目前为止，我已经使用了 MVVMLight 框架，它有这个很棒的 Messenger 组件。在 JS 世界中是否有类似的东西（如果它是我已经在使用的 js-signals 库，那么我应该如何使用它来实现我的目标？）

我也可以使用内置于 knockout fw 中的 subscribable 对象，但问题仍然存在 - 将它放在哪里（或如何在 VM 之间共享实例）？

Answer 1

您只需将它包含在您的 define 中即可注入它。

首先，创建一个新文件，EventDispatcher.js，其中包含您的 EventDispatcher 代码（以及其他相关的 Knockout 位，例如返回视图模型等等).

然后在你当前的文件中加入：

define([ ... , ... , "EventDispatcher"], function( ... , ... , EventDispatcher )

现在您可以通过以下方式简单地调用此文件中的方法：

EventDispatcher.itemClicked.dispatch()

（其中 EventDispatcher 是我们在 define 参数中为其命名的）。

请记住，您的 EventDispatcher.js 文件还需要通过自己的 define 包装器传递给它的 signals 文件。

KnockoutJS 中 ViewModel 之间的通信

Communication between ViewModels in KnockoutJS

javascript

viewmodel

knockout.js