Question

我正在制作（学习！）backbone.Marionette app。我的数据包含花卉，水果和鸟类阵列。我成功地追加了花和果实。但我正在接受挑战，将每只果实下面的鸟类添加到下面。任何人帮我解决这个问题？

有关详细信息，请访问现场演示：

这是我的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

你实际上已经走在正确的轨道上了。你唯一要做的就是使用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/

Backbone.Marionette - 如何在Composite-view中附加第3个子视图？

1 个答案: