javascript – Backbone.View：delegateEvents不会将事件重新绑定到子视图

我已经将这个问题分解为可能的最小例子(即,它只是为了证明问题,而不是必然代表一个真实的场景).

假设我有一个父视图(这里是“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);



                
                                原文地址：https://www.jb51.cc/jquery/428261.html
                                 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

javascript – Backbone.View：delegateEvents不会将事件重新绑定到子视图

相关推荐