子视图上的Backbone Layoutmanager delegateEvents不起作用

Question

我所拥有的是:

Views.Parent = Backbone.View.extend( {
    template: "parent",
    initialize: function( ) {
        this.render( );
    },
    beforeRender: function( ) {
        this.setView( ".foo", new Views.Child( {
            model: this.model
        } );
    },
    afterRender: function( ) {
        this.$el.html( Handlebars.compile( this.$el.html( ) ).call( this, this.model.attributes ) );
        var foo = this.getView( ".foo" );
        foo.delegateEvents( ); 
    }
} );
Views.Child = Backbone.View.extend( {
    template: "child",
    events: {
        "click input": "inputClick"
    },
    initialize: function( ) {
        this.listenTo( this.model, "change", this.render );
    },
    inputClick: function( ) {
        console.info( "Input Clicked" );
    }, 
    afterRender: function( ) {
        this.$el.html( Handlebars.compile( this.$el.html( ) ).call( this, this.model.attributes ) );
        var foo = this.getView( ".foo" );
        foo.delegateEvents( ); 
    }
} );

Views.Child中的事件没有触发。视图绝对是找到和foo。Events返回正确的事件。我已经尝试了多种方法插入我的子视图，delegateEvents就是不做它。

还有其他人遇到这个问题并能提供任何见解吗?

我应该提到我同时使用事件属性和这个。子视图中的listenTo。没有人会被解雇。

编辑:父视图被添加到另一个视图如下:this.$el.append( parentView.$el );

其中parentView是Views.Parent的实例化对象

Answer 1

当你在afterRender中调用this.$el.html时，你正在覆盖视图当前HTML(和每个绑定事件/子视图)。因此，您正在删除您在beforeRender中设置的子视图。

这就是为什么你没有事件启动。

我想提供更多关于如何组织代码的见解…但我不能理解你在afterRender中想做什么，这根本没有意义。在fetch和render配置选项中编译所有模板代码，而不是在afterRender中。

快速提示:
beforeRender:设置子视图
afterRender:绑定事件或启动jQuery插件等。这里不应该碰DOM