将Backbone.View重新注入DOM,并保留事件,而不是创建新事件

qpgpyjmq  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(126)

我得到了下面的例子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/

qfe3c7zg

qfe3c7zg1#

您正在尝试绑定到 Backbone.js 视图而不是DOM元素:
this.on('switch', this.switch, this);
这一切都很好,但是谁触发'switch'事件呢?您没有触发DOM事件的绑定,并且this.delegateEvents();只对DOM事件起作用。
一旦设置了DOM事件,例如
this.$el.on('click', 'a', this.switch)--将触发'switch'事件,并且只要$el未从DOM中删除,就不必重新委托事件。

相关问题