javascript - Backbone .View : delegateEvents not re-binding events to subview

Question

我已将此问题分解为尽可能小的示例(即，它只是为了演示问题，不一定代表真实场景)。

假设我有一个包含 subview (此处为“SubView”)的父 View (此处为“MainView”)。如果在任何时候我需要重新渲染父 View (从而重新渲染 subview )，我将丢失 subview 中的事件绑定(bind)，尽管调用了 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 = "<button class='button1'>Button1</button>";
        this.$el.html(html);
        return this;
    }
});

var v = new MainView();
$("#area1").html(v.render().$el); // binds work fine

// do some work... then re-render...

$("#area1").html(v.render().$el); // breaks event binds

我不明白为什么会这样。任何输入将不胜感激。

Answer 1

要保留绑定(bind)，您可以做三件事。

使用 $.append 代替 $.html

使用 $.append 将使您的绑定(bind)保持完整，同时注意不要丢失任何同级内容。

只需重新渲染而不重新附加

在您的代码中，您重新呈现您的 View 并重新附加它的内容。这是没有必要的。只需调用 v.render() 即可获得相同的视觉效果，但保持绑定(bind)不变。

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 字符串，而不是元素，并且还取消绑定(bind)子节点上存在的任何事件处理程序。我可以解释这种行为的唯一方法是，通过将 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);