骨幹的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只是沒有做到這一點。

有沒有其他人跑到這，並可以提供任何見解？

我應該提到我在子視圖中使用了events屬性和this.listenTo。他們都沒有被解僱。

編輯：父被添加到另一個視圖，例如： this.$el.append(parentView.$el);

凡parentView是Views.Parent實例化的對象。

Answer 1

當您在中致電this.$el.html時，您將覆蓋當前的HTML視圖（以及每個綁定的事件/子視圖）。因此，您將刪除您在beforeRender中設置的子視圖。

這就是爲什麼你沒有事件發生。

我想提供更多關於如何組織代碼的信息......但我無法理解你在afterRender中試圖做什麼，這是毫無意義的。編譯fetch和render配置選項中的所有模板代碼，而不是afterRender。

快速注意：
beforeRender：你設置子視圖
afterRender：在您綁定的事件或啓動jQuery插件，等你不應該在這裏接觸到DOM。