Backbone.Marionette - How to append 3rd sub-view in Composite-view?

Question

I am making(learning!) backbone.Marionette app. My data contains flower, fruit and birds arrays. I appended successfully both the flower and fruit. But I am getting challenge with appending the birds underneath of each fruits. any one help me to sort this issue?

for full details visit live demo:

Live Demo

here is my html template:

<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>

And here you go for 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

You were actually already on the right track. The sole thing you had to do was using a CompositeView for the fruits instead of an 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');
    }   
});

From there you can define collections for the birds the same way as you did for the fruits:

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);
    });        
});

And of course the template for the flowers should be:

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

See a working version here: http://jsfiddle.net/Cardiff/ngr9N/