backbone.js - 重新渲染子视图会丢失事件

Question

我看过这个问题，但在重新渲染后我仍然无法维护子视图的事件。我试图在这里重新创建我的问题：

var MainView = Backbone.View.extend({
    initialize : function() {
      this.composer = new Composer();
    },
    render : function() {
        this.$el.html(this.composer.render().el);
    }
});

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

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

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

var Composer = Backbone.View.extend({
    tagName : 'ul',    
    render: function(){
        console.log( "Composer.render" );
        this.$el.empty();
        for (var i = 0; i < 5; i++) {
            var sub = new SubView();
            this.$el.append( sub.render().el );           
        }   
        sub.delegateEvents();
        return this;
    }
});

http://jsfiddle.net/4qrRa/2/

在示例中，重新渲染视图会禁用子视图中的点击事件。我不确定为什么这不起作用。

Answer 1

按照您发布的链接的解释。您只需要this.composer.delegateEvents();在 theempty()和呼叫之间包含一个呼叫append()。（在链接中解释）

因此，只需将您的修改MainView为：

var MainView = Backbone.View.extend({
    initialize: function () {
        this.composer = new Composer();
    },
    render: function () {
        this.$el.empty();
        this.composer.delegateEvents();
        this.$el.append(this.composer.render().el);
    }
});

看看这里的 JSFiddle：http: //jsfiddle.net/4qrRa/5/