我得到了下面的例子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/
1条答案
按热度按时间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中删除,就不必重新委托事件。