Jquery 主干.木偶-如何在复合视图中附加第三个子视图？

我正在制作（学习！）主干。木偶应用程序。我的数据包含花卉、水果和鸟类数组。我成功地把花和水果都加了上去。但我在每种水果下面都加上鸟，这是一个挑战。有人帮我解决这个问题吗

有关详细信息，请访问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>

---

你实际上已经走上了正确的轨道。您必须做的唯一一件事是对水果使用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>

请参见此处的工作版本：

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