Backbone.Marionette - 如何在複合視圖中追加第3個子視圖？

Question

我正在製作（學習！）backbone.Marionette應用程序。我的數據包含花，水果和鳥類陣列。我成功地追加了花和果實。但是，我正在接受每個水果下方鳥類的挑戰。任何人都可以幫我解決這個問題？

的全部細節參觀現場演示：

Live Demo

這裏是我的HTML模板：

<script type="text/template" id="flower-template"> 
    <%= name %> 
</script> 
    <script type="text/template" id="garden-template"> 
     <div> <%= name %> </div> 
     <div id="garden"> 
      <ul></ul> 
     </div> 
    </script> 

<script type="text/template" id="bird-template"> 
     <%= name %> 
</script> 

在這裏，你去爲腳本：

var data = [ 
     { 
      "id": "1", 
      "name": "Rose", 
      "fruits": [ 
      { 
       "id": "100", 
       "name": "Banana", 
       "birds":[ 
        {"name":"parrot1"}, 
        {"name":"parrot2"} 
       ] 
      }, 
      { 
       "id": "101", 
       "name": "Gova", 
       "birds":[ 
        {"name":"eagle1"}, 
        {"name":"eagle2"} 
       ] 
      } 
      ] 
     }, 
     { 
      "id": "2", 
      "name": "Lilly", 
      "fruits": [ 
      { 
       "id": "200", 
       "name": "Mango", 
       "birds":[ 
         {"name":"dove1"}, 
         {"name":"dove2"} 
       ] 
      }, 
      { 
       "id": "201", 
       "name": "PineApple", 
       "birds":[ 
         {"name":"Bat1"}, 
         {"name":"Bat2"} 
       ] 
      } 
      ] 
     }, 
     { 
      "id": "3", 
      "name": "Lotus", 
      "fruits": [ 
      { 
       "id": "300", 
       "name": "Apple", 
       "birds":[ 
         {"name":"cooko1"}, 
         {"name":"cooko2"} 
       ] 
      }, 
      { 
       "id": "301", 
       "name": "Charry", 
       "birds":[ 
         {"name":"crow1"}, 
         {"name":"crow2"} 
       ] 
      } 
      ] 
     } 
] 

var gardenApp = new Backbone.Marionette.Application(); 

gardenApp.addRegions({ 
    mainRegion:'#content' 
}); 

gardenApp.birdModel = Backbone.Model.extend({}); 
gardenApp.birdCollection = Backbone.Collection.extend({ 
    model:gardenApp.birdModel, 
    initialize:function(){ 
     //console.log('flower collection initialized'); 
    } 
}); 

gardenApp.flowerModel = Backbone.Model.extend({}); 
gardenApp.flowerCollection = Backbone.Collection.extend({ 
    model:gardenApp.flowerModel, 
    initialize:function(){ 
     //console.log('flower collection initialized'); 
    } 
}); 

gardenApp.fruitModel = Backbone.Model.extend({}); 
gardenApp.fruitCollection = Backbone.Collection.extend({ 
    model:gardenApp.fruitModel, 
    initialize:function(){ 
     // console.log('fruit collection initialized'); 
    } 
}); 

gardenApp.birdView = Backbone.Marionette.ItemView.extend({ 
    tagName:"li", 
    template:"#bird-template" 
}); 


gardenApp.flowerView = Backbone.Marionette.ItemView.extend({ 
    tagName:"li", 
    template:"#flower-template" 
}); 

//how to add the bird under fruit? 

gardenApp.fruitView = Backbone.Marionette.CompositeView.extend({ 
    template:"#garden-template", 
    itemViewContainer:"ul", 
    itemView:gardenApp.flowerView, 
    initialize:function(){ 
     this.collection = this.model.get('fruits'); 
    } 

}); 

gardenApp.grandView = Backbone.Marionette.CollectionView.extend({ 
    itemView : gardenApp.fruitView, 
    initialize:function(){ 
     //console.log('initialized'); 
    } 
}); 


gardenApp.addInitializer(function(option){ 
    var datas = new gardenApp.flowerCollection(option.data); 

    datas.each(function(data, index){ 
     var fruits = data.get('fruits'); 
     var fruitCollection = new gardenApp.fruitCollection(fruits); 
     data.set('fruits', fruitCollection); 
    }); 

    var combainedView = new gardenApp.grandView({collection:datas}); 
    gardenApp.mainRegion.show(combainedView); 
}); 

gardenApp.start({data:data}); 

Answer 1

你實際上是alr在正確的軌道上。你要做的唯一事情是使用CompositeView中的水果，而不是ItemView控件：

gardenApp.birdView = Backbone.Marionette.ItemView.extend({ 
    tagName:"li", 
    template:"#bird-template" 
}); 

gardenApp.flowerView = Backbone.Marionette.CompositeView.extend({ 
    template:"#flower-template", 
    itemViewContainer:"ul", 
    itemView:gardenApp.birdView, 
    initialize:function(){ 
     this.collection = this.model.get('birds'); 
    } 
}); 

從那裏像你一樣的水果，你可以定義集合爲鳥類以同樣的方式：

datas.each(function(data, index){ 
    var fruits = data.get('fruits'); 
    var fruitCollection = new gardenApp.fruitCollection(fruits); 
    data.set('fruits', fruitCollection); 

    // Add birds 
    fruitCollection.each(function(data, index){ 
     var birds = data.get('birds'); 
     var birdCollection = new gardenApp.birdCollection(birds); 
     data.set('birds', birdCollection); 
    });   
}); 

當然對花的模板應該是：

<script type="text/template" id="flower-template"> 
    <div> <%= name %> </div> 
    <div id="flower"> 
     <ul></ul> 
    </div> 
</script> 

在這裏看到一個工作版本：http://jsfiddle.net/Cardiff/ngr9N/