marionette - Backbone Marionette Event Aggregator：如何在 App 级别监听 ItemView 事件

Question

我是 Marionette 的新手，无法了解事件...

我有一个触发事件的 ItemView，我想在应用程序级别接收这个事件，但是当我的应用程序监听这个事件时，什么都没有发生......

如果事件聚合器在 Application 和 ItemView 中，为什么这段代码不起作用？：

var MessageItemView = Backbone.Marionette.ItemView.extend({
  template: "#messagesTPL",
  tagName: 'tr',
  className: 'messageItem',
  events : {
    'click': 'displayMessage'
  },
  displayMessage: function () {
    this.trigger('display:message');
  }
});

App.on('display:message', function () {
  console.log('display message !!!');
});

Answer 1

如果要在应用程序级别监听事件，则必须在应用程序级别触发它：

displayMessage: function () {
  myApp.trigger('display:message');
}

假设myApp是您的 Marionette 应用程序。然后，您只需监听该事件：

myApp.on('display:message', ...)

这是实现您所要求的唯一方法：“我有一个触发事件的 ItemView，我想在应用程序级别接收此事件”。根据您的情况，更好的方法是

• 按照 Andrew 的建议使用 listenTo（参见此处的示例：https ://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/config/marionette/regions/dialog.js ）。在示例中，对话区域监听视图上触发的“dialog:close”事件，并对其做出反应
• 使用控制器监听视图上的事件并做出正确反应，如您在此处看到的：https ://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/ list_controller.js#L38控制器对视图中触发的“contacts:filter”事件做出反应，并对其做出反应

这两种解决方案都不需要“污染”全局事件空间。

Answer 2

好的，所以我尝试了 listenTo 解决方案，这是我的代码的一部分：

var regionManager = Backbone.Marionette.Region.extend({
    el: "#messages",
    onShow: function (view) {
        this.listenTo(view, "display:message", this.displayMessage);
    },
    displayMessage: function () {
        console.log('regionManager received display:message');
    }
});
App.addRegions({
    messageListRegion: regionManager

});
var MessageItemView = Backbone.Marionette.ItemView.extend({
    template: "#messagesTPL",
    tagName: 'tr',
    className: 'messageItem',
    events : {
        'click': 'displayMessage'
    },
    displayMessage: function (e) {
        e.preventDefault();
        e.stopPropagation();
        this.trigger('display:message');
    }
});

但是当我点击一个messageItemView时，regionManager并没有执行listenTo方法中设置的displayMessage回调。