如何从主干中的另一个视图绑定元素上的事件

Posted 2023-02-26

【中文标题】如何从主干中的另一个视图绑定元素上的事件

【英文标题】：How can I bind an event on an element from another view in backbone

【发布时间】：2013-03-14 04:34:56

【问题描述】：

我试图附加的事件来自另一个视图

我有两种观点

标题视图 内容视图

我的 headerView 使用 Header 模型，每次模型更改时，我都会渲染（）我的 headerView。

像大多数 iPhone 的应用程序一样，我在标题中使用两个按钮进行导航，根据您所在的位置，图像可以更改。

这就是为什么当我初始化一个随机的 contentView 时，我可以访问 headerView 中的模型并更改一个属性。

我需要做的最后一件事是为这个按钮创建一个点击事件。

我正在尝试在我的内容视图中绑定（这更有意义）

events: 
   "click .h_left": "newLocation",

事件没有触发，只有当我将此事件放在 headerView 中时才会出现这种情况，有推荐的干净解决方案吗？

【问题讨论】：

能提供jsfiddle吗？

我觉得没必要，我再解释一下

.h_left 是否在您的内容视图的 el 或标题中？

它在标题内

【参考方案1】：

Backbone.View 的重点是将 DOM 子树的修改和事件处理封装到 View 类中。因此，Backbone 不支持您的方案。

您有几种选择可以达到相同的最终结果。

简单（但错误）的方式：使用jQuery监听header的事件：

var ContentView = Backbone.View.extend(
   initialize: function() 
     $(".h_left").on('click', this.newLocation);
   ,

   remove: function() 
     $(".h_left").off('click', this.newLocation);
     Backbone.View.prototype.remove.call(this);
   
);

这会破坏标题元素的封装，并将内容视图与标题元素的实现紧密耦合。换句话说：意大利面。

正确做法：使用中介者将消息从标头传递到其他视图：

var HeaderView = Backbone.View.extend(
  events: 
    "click .h_left": "onLeftButtonClick"
  ,

  onLeftButtonClick: function() 
    //You can use the root Backbone object as a global event bus
    //Publish a message
    Backbone.trigger('header:leftbutton');
  
);

var ContentView = Backbone.View.extend(
   initialize: function() 
     //Subscribe to a message. If you use listenTo, the subscription is 
     //automatically cleared when your content view is destroyed.
     this.listenTo(Backbone, 'header:leftbutton', this.newLocation);
   ,

   newLocation: function() 
     //..
   
);

【讨论】：

谢谢，当我们关闭这个 contentView 时，我们不需要移除“listenTo”事件来防止内存泄漏吗？

@KopaxJackHerrauer 你没有。 listenToed 事件在您remove 视图时被清除。查看backbonejs.org 上的文档。

谢谢...我也是骨干新手。帮了我很多。也学到了新东西。谢谢朋友...