木偶添加孫女的意見

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


    }); 

});