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。

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

1 个答案: