backbone.js - 如何从主干中的另一个 View 将事件绑定(bind)到元素上

Question

我正在尝试附加的事件来自另一个 View

我有两种看法

• 标题 View
• 内容 View

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

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

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

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

我正在尝试在我的内容 View 中进行绑定(bind)(这更有意义)

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

事件没有触发，只有当我将此事件放在 headerView 中时才会发生这种情况，是否有推荐的干净解决方案来做到这一点？

Answer 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);
   }
});

这打破了标题元素的封装，并将内容 View 与标题元素的实现紧密耦合。换句话说:意大利面。

正确的方法:使用中介者将消息从标题传递到其他 View :

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() {
     //..
   }
});