Question

我有以下Backbone View：

var ParentView = Backbone.View.extend({
     events: {
         "contextmenu .child-view" : "handleChildView"
     },

     initialize: function () {
        // create child view
        var child = new ChildView;
     },

     handleChildView: function () {
     }
});

var ChildView = Backbone.View.extend({

     initialize: function () {
        this.el.addClass('child-view');
     }
});

我需要在handleChildView处理程序中处理childView的contextmenu事件。但我需要引用childView和目标DOM元素。

我怎么能这样做？

Answer 1

我通常会尽量避免这种情况。我认为这是一种反模式，因为我相信每个视图都应该只处理它自己的事件。

当需要在视图之间通知事件时，我使用事件总线模式。（发布者/订阅者）

看到我之前发布的这个答案：

Call a function in another Marionette.ItemView

它很相似。

您应该在应用中定义一个事件总线。在您的ChildView中，发生事件发生时（例如点击）

var ChildView = Backbone.View.extend({
  events: {
    'click': 'handleClick'
  },
  handleClick: function() {
    //publish event
    EventBus.trigger('childViewClicked', [anything you wanna pass]);
  }
});

并在父视图中订阅此事件：

 var ParentView = Backbone.View.extend({
   initialize: function () {
     //subscribe events:
     EventBus.on('childViewClicked', this.handleChildView, this);
   },

   handleChildView: function ([params you wanna receive]) {
   }
 });

Answer 2

这对你有用吗？

var ParentView = Backbone.View.extend({
     events: {
         "click .child-view .contextmenu" : "handleChildView"
     },

     initialize: function () {
        // create child view
        var child = new ChildView;
     },

     handleChildView: function () {
     }
});

var ChildView = Backbone.View.extend({
     className:'child-view'
     , initialize: function () {
        this.el.addClass('child-view');
     }
});

您可能必须在父视图（在DOM中）中呈现子视图

如何在父视图中绑定子视图处理事件的上下文

2 个答案: