如何在marionette.js中擁有CollectionView的CollectionView？

Question

我有一個用例，我想要有一個collectionView（或複合視圖）呈現的集合。使用marionette.js做這件事的最好方法是什麼？

我的模型結構如下 -

A 
| 
|-- Collection<B> 
       | 
       |--Collection<C> 

我想呈現如下 -

A1 
| 
|--B1 
| | 
| C1 
| | 
| C2 
| | 
| C3 
| 
|--B2 
    | 
    C4 
    | 
    C5 
    | 
    C6 

什麼是做到這一點的最好方法是什麼？ 我不希望它是這樣

A1 
| 
|--B1 
| | 
| |--C1 
| | 
| |--C2 
| | 
| |--C3 
| 
|--B2 
    | 
    |--C4 
    | 
    |--C5 
    | 
    |--C6 

Answer 1

所以，你可以通過創建可除冰如果試圖顯示孩子有一個集合，或者只是一個模型集合視圖實現這一目標。因此，對於這個例子，我建立了一個模型，它有一個名稱和一個可選集合，如果集合被使用，那麼它將包含模型集合，而集合又可以有一個可選集合。

然後定義一個集合視圖，集合視圖將檢查孩子是否有一個集合，它是否會將集合視圖用作子集。

//collection view that can choose to display another collection view or a model 
myApp.Views.View1 = Marionette.CollectionView.extend({ 
    tagName: "ul", 
    //overridden getChildView to return either another collection view or an item view 
    getChildView: function (child) { 
     if (child.get("collection")) { 
      return myApp.Views.View1; 
     } 
     return myApp.Views.ItemView; 
    }, 

    //set either the collection or the model depending which view we are using 
    childViewOptions: function (model, index) { 
     if (model.get("collection")) { 
      return { 
       collection: model.get("collection"), 
      } 
     } else { 
      return { 
       model: model 
      } 
     } 
    } 
}); 

如果它不那麼它將只使用一個項目視圖顯示模型

//item view to display final model 
myApp.Views.ItemView = Marionette.ItemView.extend({ 
    tagName: "li", 
    template: _.template('<%= name %>'), 
}) 

這裏運行 - http://jsfiddle.net/leighking2/r5ogoL5h/

如果你想顯示的名稱模型正在呈現在集合上方，然後您可以使用複合視圖，這也允許我們更多地控制視圖中的鉤子以顯示集合

//collection view that can choose to display another collection view or a model 
myApp.Views.View1 = Marionette.CompositeView.extend({ 
    tagName: "ul", 
    template: _.template('<li><%= name %></li><li><ul class="collectionHook"></ul></li>'), 
    childViewContainer: ".collectionHook", 
    //overridden getChildView to return either another collection view or an item view 
    getChildView: function (child) { 
     if (child.get("collection")) { 
      return myApp.Views.View1; 
     } 
     return myApp.Views.ItemView; 
    }, 

    //set either the collection or the model depending which view we are using 
    childViewOptions: function (model, index) { 
     if (model.get("collection")) { 
      return { 
       model: model, 
       collection: model.get("collection"), 
      } 
     } else { 
      return { 
       model: model 
      } 
     } 
    } 
}); 

http://jsfiddle.net/leighking2/kx9kuup0/

唯一的問題是HTML是不是100％有效，你結束了一個雙<ul>，當你顯示一個複合視圖內，但有一些調整，可能是固定的複合視圖，它仍然呈現正確，但。