Marionette添加孙子视图

Question

我正在构建一个具有标签功能的相册系统。您可以为相册中的图片中的人物添加标签。

我想在Backbone中构建它，并尝试设置模型、集合和视图。模型和集合使用主干关系。我设法显示了一个带有照片的列表，但现在的问题是显示每张照片中的标签。

我该怎么做呢？

到目前为止我的代码如下：

require(['../../common'], function (common) {
  require(
    ["jquery",
    "underscore",
    "backbone",
    "backbone-relational",
    "marionette",
    "text!templates/phototag.tpl",
    "text!templates/tag.tpl",
    "pages/fotoalbum/models/album"
    ],
    function($, _, Backbone,Br,marionette,photoTpl,tagTpl,Album) {
      items = [
      {
        'fotonaam':'http://loremipsum.com/300/400',
        'tags':
        [
        {name:'John Doe', 'x':0.5, 'y':0.6},
        {name:'Pieter J', 'x':0.5, 'y':0.6}
        ]
      },
      {
        'fotonaam':'http://loremipsum.com/300/400',
        'tags':[
        {name:'Hans T', 'x':0.66, 'y':0.2}
        ]
      }
      ];



     var album = new Album( {'photos':items } );
     console.log(album);


      // vieww
      var TagItemView = Backbone.Marionette.ItemView.extend({
        tagName: "li",
        template: tagTpl
      });

      var PhotoItemView = Backbone.Marionette.CollectionView.extend({
        tagName: "li",
        template: photoTpl,
        childView: TagItemView
      });

      var AlbumCollectionView = Backbone.Marionette.CollectionView.extend({
        tagName: "ul",
        className: "list",
        childView: PhotoItemView
      });


      var myAlbumView = new AlbumCollectionView({'collection':album.get('photos')});
      myAlbumView.render();
      $('#photolist').append(myAlbumView.el);


    });

});

Answer 1

答案就在木偶的CompositeView里。这是我的新代码：

require(['../../common'], function (common) {
  require(
    ["jquery",
    "underscore",
    "backbone",
    "backbone-relational",
    "marionette",
    "text!templates/phototag.tpl",
    "text!templates/taglist.tpl",
    "text!templates/tag.tpl",
    "pages/fotoalbum/models/album"
    ],
    function($, _, Backbone,Br,marionette,photoTpl,tagListTpl,tagTpl,Album) {
      items = [
      {
        img:'http://loremipsum.com/300/400',
        tags:
        [
        {name:'John Doe', x:0.5, y:0.6},
        {name:'Pieter J', x:0.5, y:0.6}
        ]
      },
      {
        img:'http://loremipsum.com/300/400',
        tags:[
        {name:'Hans T', x:0.66, y:0.2}
        ]
      }
      ];



      var album = new Album( {'photos':items } );

      var tagCollectionView = Backbone.Marionette.CompositeView.extend({
        template: tagListTpl,
        tagName: "ul",
      }); 

      var PhotoCollectionView = Backbone.Marionette.CompositeView.extend({
        template: photoTpl,
        tagName: "li",
        childViewContainer:'.info',
        childView: tagCollectionView, 
        model:this.model,
        initialize: function(){
          var tags = this.model.get('tags');
          this.collection = tags;
          this.model = this.model
        },
        serializeData: function(){
          return {
            "name": "some value"
          }
        }
      });

      var AlbumCollectionView = Backbone.Marionette.CollectionView.extend({
        tagName: "ul",
        className: "list",
        childView: PhotoCollectionView,
      });
      var myAlbumView = new AlbumCollectionView({'collection':album.get('photos')});
      myAlbumView.render();
      $('#photolist').append(myAlbumView.el);


    });

});