我已经将这个问题分解为可能的最小例子(即,它只是为了证明问题,而不是必然代表一个真实的场景).
假设我有一个父视图(这里是“MainView”),它包含一个子视图(这里是“SubView”).如果,在任何时候,我需要重新渲染父视图(从而重新呈现子视图),我在子视图中丢失事件绑定,尽管调用delegateEvents.
可以在这里找到一个jsfiddle：http://jsfiddle.net/ya87u/1/
这是完整的代码：
var MainView = Backbone.View.extend({
tagName : "div",initialize : function() {
this.subView = new SubView();
},render : function() {
this.$el.html(this.subView.render().$el); // .html() breaks binds
this.subView.delegateEvents(); // this re-establishes them
return this;
}
});
var SubView = Backbone.View.extend({
tagName : "div",events : {
"click .button1" : "onButtonPress"
},onButtonPress : function() {
alert("Button pressed");
},render : function() {
var html = "我不明白为什么会这样.任何投入将不胜感激.
使用$.append而不是$.html
使用$.append将保持您的绑定完整,并注意您不会丢失任何兄弟内容.
只需重新渲染而无需重新附加
在您的代码中,您重新渲染视图并重新附加其内容.这不是必需的.简单地调用v.render()将获得相同的视觉效果,但保持绑定完整.
var v = new MainView();
$("#area1").html(v.render().$el); // binds work fine
// do some work... then re-render…
v.render(); // keeps event binds
$("#area1").append(v.render().$el); // works too
在调用$.html()之前使用$.empty()
根据jQuery documentation for $.html(htmlString)
If you are keeping references to these DOM elements and need them to be unchanged,use .empty().html( string ) instead of .html(string) so that the elements are removed from the document before the new string is assigned to the element.
重要的部分是$.html需要一个html字符串,而不是元素,并且还取消绑定子节点上存在的任何事件处理程序.我可以解释这种行为的唯一方法是,不知何故,通过将dom树转换为字符串,反之亦然,事件将被删除.有趣的是,使用文档中提到的$.empty()可以解决问题.
// any $.html reference needs to have an $.empty too
this.$el.empty().html(this.subView.render().$el);
// and then later for your mainView
$("#area1").empty().html(v.render().$el);
