KnockoutJS中ViewModel之间的通信

时间:2015-05-01 20:29:34

标签: javascript knockout.js viewmodel

我正在尝试在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世界,到目前为止,我已经使用了具有这个伟大的Messenger组件的MVVMLight框架。在JS世界中是否有类似的东西(如果我已经使用了js-signals lib,那么我应该如何使用它来实现我的目标呢?)

我还可以使用敲除fw中内置的subscribable对象,但问题仍然存在 - 放置它的位置(或者如何在VM之间共享实例)?

1 个答案:

答案 0 :(得分:1)

您只需将其包含在define

中即可

首先,用你的EventDispatcher代码创建一个新文件 EventDispatcher.js (以及其他相关的Knockout位,比如返回视图模型和诸如此类的东西)。

然后在当前文件中添加:

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

现在您只需使用以下命令在此文件中调用其方法:

EventDispatcher.itemClicked.dispatch()

(其中EventDispatcher是我们在define参数中命名的内容。

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