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

Question

如何在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'}不起作用。

有谁知道解决方案吗？

谢谢， Rohan

- user823400

---

你能展示一下带有 class 为 changeLink 的锚点标签的 HTML 吗？还有可能展示一下 clearSelect 方法吗？ - c3rin

通过在delegateEvents中传递事件，我认为您正在覆盖事件属性，因此它们将不再起作用。不清楚您在尝试做什么。为什么不将所有事件放在事件哈希表中的一个位置？也就是说，为什么需要通过delegateEvents函数调用添加特定的事件选择器？ - Bill Eisenhauer

@Bill 你说得对，delegateEvents 中的第二条指令是 $(this.el).unbind();。看起来 Rohan 不应该调用 delegateEvents。声明 events 对象应该就足够了。 - c3rin

Answer 1

Backbone会自动代理视图中的事件属性。您正在覆盖先前委托的事件。您可以调用$(this.el).delegate(...)，但也可以执行以下操作

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

- Julien

---

这很容易，但我想知道为什么没有内置函数来实现这个。 - forresto

如果您正在扩展视图，则实际上必须使用_.clone(this.events)，否则如果原始视图中没有changeSelect，则它将失败。很棘手。this.delegateEvents(_.extend(_.clone(this.events), {'click select': 'changeSelect'})); - forresto

Answer 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()。

- forresto