在Backbone.js视图之间传递消息

Question

I'm currently working on a bug in my company's backbone application in which a task in progress in one view should disable behavior in another view. The behavior we're looking for is when the task begins and the user navigates to the second view, the behavior is already disabled, but because the view hasn't been rendered yet the event to disable the behavior isn't triggering.

Is there a way around this without parameterizing the view?

Current code is as follows:

In settings.js:

handleUpdateClick: function(evt) {
    // ...
    EventDispatcher.trigger('updatingStateChanged');
    // ...
}

In dashboard.js:

initialize: function(options) {
    EventDispatcher.on("updatingStateChanged", this.handleUpdatingStateChanged);
    // ...
}

Answer 1

通常，许多应用程序要做的是具有全局“应用程序状态”模型，您可以在其中存储当前状态，并可以在组件之间共享数据/事件。

Answer 2

另一个选择是拥有一个可能基于Backbone.Router的全局应用程序控制器，该控制器充当事件和消息传递的单例-在大型项目中经常看到这种情况。

Answer 3

To add to the current answers, in one of my Backbone apps I created a central Hub to listen for events. So it works like this

//This is outside your view code
var HUB = {};
_.extend(HUB, Backbone.Events);

In your view you listen for events on the Hub:

initialize: function(options) {
    HUB.on('state:change', this.handleUpdatingStateChanged, this);        
        // ...
}

Then in your settings.js you can trigger events against the Hub like so:

handleUpdateClick: function(evt) {
    // ...
    HUB.trigger('state:change');
    // ...
}

I think this approach could solve your problem. It's quite simple to implement too. One important gotcha is that you must remember to stop listening and undelegate events from the hub when you close a view - typically you'd just add a HUB.off(null, null, this); to your existing zombie view cleanup/close approach.