如何为视图添加动态事件？答案

【问题标题】：How to add dynamic events for view?如何为视图添加动态事件？
【发布时间】：2011-09-26 03:23:53
【问题描述】：

如何在 Backbone.js 的视图类中添加动态事件

我有一个带有

的视图类

var myViewClass = Backbone.View.extend({
    events: {
        'change select': 'changeSelect',
        'click a.changeLink': 'clearSelect'
    },

    initialize: function() {
        this.delegateEvents({'click select': 'changeSelect'});
    },

    .
    .
    .        
});

这是添加 {'click select': 'changeSelect'} 事件，但不知何故 {'click a.changeLink': 'clearSelect'} 不会工作。

有人知道解决办法吗？

谢谢，罗汉

【问题讨论】：

你能用 changeLink 类显示锚标记的 html 吗？还有可能是方法 clearSelect？
通过在 delegateEvents 中传递事件，我相信您正在覆盖 events 属性，因此它们将不再起作用。目前尚不清楚您要在这里做什么。为什么不将所有事件放在事件哈希中的一个位置？例如，为什么需要通过 delegateEvents 函数调用添加特定的事件选择器？
@Bill 你是对的，delegateEvents 中的第二条指令是$(this.el).unbind();。看起来 Rohan 根本不应该调用 delegateEvents。声明 events 对象就足够了。

标签： javascript events backbone.js

【解决方案1】：

Backbone 自动从视图的 events 属性中委托事件。您正在覆盖以前委托的事件。你可以调用 $(this.el).delegate(...) 但你也可以这样做

this.delegateEvents(_.extend(this.events, {'click select': 'changeSelect'}));

【讨论】：

这很简单，但我想知道为什么没有内置函数。
如果你正在扩展一个视图，你实际上必须_.clone(this.events)，否则如果你在原始视图中没有changeSelect，它将失败。棘手。 this.delegateEvents(_.extend(_.clone(this.events), {'click select': 'changeSelect'}));

【解决方案2】：

因为我经常这样做，所以这是我的小型 Backbone 扩展（基于 Julien 的回答和我的测试）：

Backbone.View.prototype.addEvents = function(events) {
  this.delegateEvents( _.extend(_.clone(this.events), events) );
};

用途：

BaseResizable.View = Base.View.extend({
  initialize: function() {
    Base.View.prototype.initialize.call(this);
    this.addEvents({
      'resizestop': 'resizeStop'
    });
  },
  resizeStop: function(event, ui){...}
}

如果您使用undelegateEvents()，则必须再次执行addEvents()。

【讨论】：