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

How to bind context of child view handling event in parent view

本文关键字：视图 处理事件 上下文 绑定      更新时间：2023-10-18

我有以下主干视图：

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元素。

我怎么能做这个？

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

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

看到我之前发布的答案：

调用另一个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]) {
   }
 });

这对你有用吗？

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中）中呈现子视图

相关文章：