Backbone:重新渲染时丢失的事件 [英] Backbone: event lost in re-render

问题描述

我有超级视图，负责渲染子视图.当我重新渲染超级视图时，子视图中的所有事件都丢失了.

这是一个例子:

var SubView = Backbone.View.extend({事件:{点击":点击"},点击:函数(){console.log("点击！");},渲染:函数(){this.$el.html("点击我");返回这个；}});var Composer = Backbone.View.extend({初始化:函数(){this.subView = new SubView();},渲染:函数(){this.$el.html( this.subView.render().el );}});var composer = new Composer({el: $('#composer')});composer.render();

当我点击 click me div 时，事件被触发.如果我再次执行 composer.render() 一切看起来都差不多，但 click 事件 不再被触发.

检查正在运行的jsFiddle.

解决方案

当你这样做时:

this.$el.html( this.subView.render().el );

您实际上是在说:

this.$el.empty();this.$el.append( this.subView.render().el );

和 empty 杀死 this 中所有内容的事件.$el:

<块引用>

为了避免内存泄漏，jQuery 在删除元素本身之前从子元素中删除了其他构造，例如数据和事件处理程序.

因此，您丢失了在 this.subView 上绑定事件的 delegate 调用，并且 SubView#render 不会重新绑定它们.

您需要将 this.subView.delegateEvents() 调用插入 this.$el.html() 但您需要在 之后调用空().你可以这样做:

render: function(){console.log( "Composer.render" );this.$el.empty();this.subView.delegateEvents();this.$el.append( this.subView.render().el );返回这个；}

演示:http://jsfiddle.net/ambiguous/57maA/1/

或者像这样:

render: function(){console.log( "Composer.render" );this.$el.html( this.subView.render().el );this.subView.delegateEvents();返回这个；}

演示:http://jsfiddle.net/ambiguous/4qrRa/

或者您可以remove 并重新创建this.subView 在渲染时以这种方式回避问题(但这可能会导致其他问题......).

I have super-View who is in charge of rendering sub-Views. When I re-render the super-View all the events in the sub-Views are lost.

This is an example:

var SubView = Backbone.View.extend({
    events: {
        "click": "click"
    },

    click: function(){
        console.log( "click!" );
    },

    render: function(){
        this.$el.html( "click me" );
        return this;
    }
});

var Composer = Backbone.View.extend({
    initialize: function(){
        this.subView = new SubView();
    },

    render: function(){
        this.$el.html( this.subView.render().el );             
    }
});


var composer = new Composer({el: $('#composer')});
composer.render();

When I click in the click me div the event is triggered. If I execute composer.render() again everything looks pretty the same but the click event is not triggered any more.

Check the working jsFiddle.

解决方案

When you do this:

this.$el.html( this.subView.render().el );

You're effectively saying this:

this.$el.empty();
this.$el.append( this.subView.render().el );

and empty kills the events on everything inside this.$el:

To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.

So you lose the delegate call that binds events on this.subView and the SubView#render won't rebind them.

You need to slip a this.subView.delegateEvents() call into this.$el.html() but you need it to happen after the empty(). You could do it like this:

render: function(){
    console.log( "Composer.render" );
    this.$el.empty();
    this.subView.delegateEvents();
    this.$el.append( this.subView.render().el );             
    return this;
}

Demo: http://jsfiddle.net/ambiguous/57maA/1/

Or like this:

render: function(){
    console.log( "Composer.render" );
    this.$el.html( this.subView.render().el );             
    this.subView.delegateEvents();
    return this;
}

Demo: http://jsfiddle.net/ambiguous/4qrRa/

Or you could remove and re-create the this.subView when rendering and sidestep the problem that way (but this might cause other problems...).

这篇关于Backbone:重新渲染时丢失的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！