9

我有一个要转换为的 Web 应用程序和使用 ko 组件的 SPA。我想知道如何进行一种组件间的通信。

例如，我想要一个“通知”组件，其中每个组件都可以发送通知。

我设法通过在主视图模型中共享一个可观察数组来找到解决方案：

var VM = function() {
    var self = this;

    this._notifications = ko.observableArray([]);
   this.notifications = {
        addInfo: function(text){
            self._notifications.push(text);
        }
    }
}

和

<comp1 params="{app: $data}"></comp1><br/>
<comp2 params="{app: $data}"></comp2><br/>
<notif params="{app: $data}"></notif>

见这里：http: //jsfiddle.net/nveron/j4829y7p/

我对这个解决方案并不完全满意，我宁愿将通知数据保留在通知组件中。

你有什么想法来解决这个问题吗？

4

1 回答 1

16

您可以使用ko.subscribable来实现一个简单的发布/订阅消息总线：

  • ko.subscribable.subscribe订阅新消息

  • ko.subscribable.notifySubscribers发布新消息

    在Ryan Niemeyer的这篇文章中了解更多信息。

在您的情况下，您可以创建一个postbox基于ko.subscribable. 组件在其中发布消息，通知虚拟机订阅它。

您甚至可以按主题发布和订阅消息。

Demo: JSFiddle

邮箱：

var postbox = (function() {
    var pb = new ko.subscribable();
    return {    
        subscribe: function(handler, topic) {
            pb.subscribe(handler, null, topic)
        },        
        publish: function(message, topic) {
            pb.notifySubscribers(message, topic);
        }
    };
}());

一个组件：

var comp1 = function(params) {           
    this.addToNotif = function(){
        postbox.publish("comp1 was here");
    }
}

通知：

...
postbox.subscribe(function(message) {
    self.notifs.push(message);
});
于 2014-10-08T09:40:09.393 回答