javascript - 将 Backbone.View 重新注入到 DOM 中，保留事件而不是创建新事件

Question

我得到了以下示例 Backbone.View：

var View = Backbone.View.extend({
  tagName: "div",

  className: "advertisement",

  initialize: function () {
    this.on('switch', this.
    switch, this);

    this.views = {};
    this.views.laptop = new LaptopAdView();
    this.views.piano = new PianoAdView();
    this.views.food = new FoodAdView();
  },

  render: function () {
    this.$el.empty();
    this.
    switch ('laptops');

    return this;
  },

  switch: function (ad) {
    var el;

    if (ad === 'laptop') {
      el = this.views.laptop.render().el;
    } else if (ad === 'piano') {
      el = this.views.piano.render().el;
    } else {
      el = this.views.food.render().el;
    }

    // reinsert the chosen view
    this.$el.empty().append(el);
    // bind all events new
    this.delegateEvents();
  }
});

如您所见，我使用 this.delegatEvents() 重新创建所有事件绑定。这实际上不是一个完美的解决方案......当我使用 this.$el.detach(); 会好得多 或其他方法，因此我使用其事件缓存整个对象，而不是重新渲染和重新创建所有事件。

现在使用小提琴：http: //jsfiddle.net/RRXnK/66/

Answer 1

您正在尝试绑定到 Backbone 视图而不是 DOM 元素：

this.on('switch', this.switch, this);

一切都很好，但是谁触发了“切换”事件？您没有触发 DOM 事件的绑定，并且this.delegateEvents();仅适用于 DOM 事件。

一旦你设置了 DOM 事件，例如

this.$el.on('click', 'a', this.switch)-- 'switch' 事件将被触发，只要 $el 没有从 DOM 中删除，您就不必重新委托事件。