backbone.js - 子视图上的主干布局管理器委托事件不起作用

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 只是没有这样做。

有没有其他人遇到过这个问题并可以提供任何见解？

我应该提到我在子视图中同时使用了 events 属性和 this.listenTo。他们都没有被解雇。

编辑：父级被添加到另一个视图中： this.$el.append( parentView.$el );

parentView的实例化对象在哪里Views.Parent。

Answer 1

当您调用this.$el.html时afterRender，您将覆盖视图当前 HTML（以及每个绑定事件/子视图）。因此，您正在删除您设置的子视图beforeRender。

这就是为什么你没有触发事件。

我想就您应该如何组织代码提供更多见解……但是我不明白您要做什么afterRender，这根本没有意义。fetch在和render配置选项中编译所有模板代码，而不是在afterRender.

快速说明：：
beforeRender您在哪里设置子视图
afterRender：您在哪里绑定事件或启动 jQuery 插件等。您不应该在这里接触 DOM。