nesting composite and collection views

http://stackoverflow.com/questions/13633780/backbone-marionette-collection-within-compositeview-which-itself-is-nested-in

by derickbailey

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="https://raw.github.com/marionettejs/backbone.wreqr/master/lib/backbone.wreqr.js"></script>
<script src="https://raw.github.com/marionettejs/backbone.eventbinder/master/lib/backbone.eventbinder.js"></script>
<script src="https://raw.github.com/marionettejs/backbone.marionette/master/lib/backbone.marionette.js"></script>
<script id="tour-template" type="text/template">
    <%= name %> //<-- THIS IS GIVING ME ISSUES
  </script>

  <script id="toursByLoc-template" type="text/template">
    <li class="nav-header"><%= name %></li>
    <div id="ind" class="indTours"></div>
    <li class="divider"></li>
  </script>

  <script id="tours-template" type="text/template">
    <%= name %>
  </script>
        
        <div id="placeholder"></div>

JavaScript

var someData = [
{   "id": "1", 
    "name": "Venice", 
    "theTours": [
        {'name': 'test venice'}, 
        {'name': 'test venice 2'}
    ]
}, 

{   "id": "2", 
    "name": "Rome",
    "theTours": [
        {'name': 'Test rome'}
    ]
}, 
{   "id": "3", 
    "name": "Dublin", 
    "theTours": [
        {'name': 'test dublin'}, 
        {'name': 'test dublin 2'}
    ]
}
];

TastypieModel = Backbone.Model.extend({});
TastypieCollection = Backbone.Collection.extend({});

Tour = TastypieModel.extend({});

ToursGroup = TastypieCollection.extend({
  model: Tour
});

ToursByLoc = TastypieModel.extend({});

ToursList = TastypieCollection.extend({
  model: ToursByLoc,
  url:'/api/v1/location/',
});


TourView = Backbone.Marionette.ItemView.extend({
  model: Tour,
  template: '#tour-template',
  tagName: 'li',    
});


ToursByLocView = Backbone.Marionette.CompositeView.extend({
  collection: ToursByLoc,

  template: '#toursByLoc-template',
  itemView: TourView,
  itemViewContainer: '#ind',

  initialize: function(){
    //As per Derick Bailey's comments regarding the need to pass on a
    //valid Backbone.Collection to the child CollectionView
    //REFERENCE: http://stackoverflow.com/questions/12163118/nested-collections-with-backbone-marionette

    var theTours = this.model.get('theTours');
    this.collection = new ToursGroup(theTours);
    console.log(this.model.get('name'));
    console.log(theTours);
    

    this.collection = new ToursGroup(theTours);
  }
});

ToursListView = Backbone.Marionette.CollectionView.extend({
  itemView: ToursByLocView,
});

var region = new Marionette.Region({el: "#placeholder"});
var stuff = new ToursList(someData);
var view = new ToursListView({collection: stuff});
region.show(view);