Marionette add grandchild views - backbone.js

Question

I'm building a photo album system with tag functionality. You can tag people in a picture within the album.
I want to build this in Backbone and am trying to set models, collections and views. The models and collections are working with backbone-relational. I managed to show a list with photos, but the problem now is showing the tags in each photo.
How should I do this?
My code so far:
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

The answer is in Marionette's CompositeView.
This is my new code:
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);
});
});