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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/jquery/428261.html

猜你在找的jQuery相关文章