Backbone - 如何處理子視圖的元素初始化？

Question

我一直在使用Backbone.js幾個月，最近在一個CSS框架中使用主幹時遇到了困境。

CSS框架中的一些元素需要一些JS初始化，並且這些元素是嵌套視圖（子視圖）的一部分。作爲子視圖的一部分，我立刻假設這些初始化應該在子視圖中進行處理：

app.ChildView = Backbone.View.extend({ 

    el: .... 

    template: ... 

    events: { 
    ... 
    }, 

    initialize: function() { 
    ... 
    }, 

    render: function() { 
     .... 

     this.$elementWithInitialization = this.$('.element'); 
     this.$elementWithInitialization.initialize(); 

     return this; 
    }, 
}); 

作爲一個子視圖，該視圖不會是DOM，直到它的最高祖先的一部分插入所有的子視圖，所以它的元素的初始化將不會工作，直到最外層視圖完成構建DOM。這說明：

<view1> 
    <view2> 
    <view3></view3> 
    <view3></view3> 
    ... 
    </view2> 
    <view2> 
    <view3></view3> 
    <view3></view3> 
    ... 
    </view2> 
    ... 
</view1> 

所以，在VIEW3元素只能被初始化，直到結束廠景插入其所有子視圖。我只是很好奇在子視圖中處理這些元素初始化的適當方法是什麼，考慮到它們的渲染取決於它們的祖先。

我總是可以爲最外層視圖中的所有這些元素做一個選擇器並對它們進行初始化，但我認爲這打破了視圖的模塊化和關注點的分離。感謝您的輸入。

Answer 1

您可以將對父視圖（最外層視圖）的引用傳遞給子級，並讓它們從父級偵聽一個準備好的事件。

//Child 
initialize: function(options){ 
    this.listenTo(options.outermostParent, 'ready', this.initCSSComponent); 
} 

//Outermost parent when stuff is ready and injected to DOM 
this.trigger('ready'); 

如果您有一個全局事件發射器對象，也可以使用它。