使用CollectionView創建同級項目視圖？

我有一個使用的CollectionView輸出以下一個backbone.marionette應用：使用CollectionView創建同級項目視圖？

的div＃主.widget
- div.head
- div.body

以下是2個兄弟姐妹ItemViews：

var LogLocationBodyView = App.ItemView.extend({ 
    tagName: "div", 
    attributes: {class: "body"}, 
    template: "#log-location-body-template" 
}); 

var LogLocationHeadView = App.ItemView.extend({ 
    tagName: "div", 
    attributes: {class: "head"}, 
    template: "#log-location-head-template" 
});

這裏是的CollectionView：

var LogLocationsView = App.CollectionView.extend({ 
    template: "#log-locations-template", 
    attributes: {id: "main", class: "widget"}, 
    itemView: LogLocationHeadView 
});

我能明顯得到LogLocationHeadView渲染，但我在尋找到inserAfter（）LogLocationBodyView最好的方法，使2個ItemViews都是兄弟姐妹。

什麼是最好的方法來解決這個問題？我嘗試了許多不同的方法。首先，我嘗試使用ItemView的onRender（），但很快意識到我只能追加到視圖中的標記。我真的需要insertAfter（）並且父類不可用，因爲在onRender中，我們仍然是在DOM之前的插入。

var LogLocationHeadView = App.ItemView.extend({ 
    tagName: "div", 
    attributes: {class: "head"}, 
    template: "#log-location-head-template", 
    onRender: function() { 

     // create a new piece of html from a different template 
     var view = new LogLocationBodyView({ 
      model: this.model 
     }); 

     view.render(); 

     $(this.el).append(view.el); 

     var c = $(this.el).children(); 
      console.log(c); // true 

     var p = $(this.el).parents(); 
      console.log(p); //undefined 

    }

我也明白，我可以在CollectionViews覆蓋appendHTML（）和renderItem（）方法，但我需要仍然能夠追加（）。所以我需要能夠傳遞一個renderType。

我真正想要做的是傳遞一個ItemViews數組和renderType到renderItem。然後，renderItems可以在appendHTML（）內分叉。

var LogLocationsView = App.CollectionView.extend({ 
    template: "#log-locations-template", 
    attributes: {id: "main", class: "widget"}, 
    itemViews: [{view: LogLocationHeadView, renderType: append}, {view: LogLocationBodyView, renderType: insertAfter}] 
});

在我試圖做到這一點之前，我想看看我是否完全脫離了這裏的基地。有一個更好的方法嗎？

來源

2012-02-27 jdcravens