title: Backbone Marionette: Get Nested/Swap Views from a CollectionView
body: <p>So I've been playing with Backbone Marionette and have been able to create a collectionview from json data. </p>
  
  <p>Here is the Picture of what I have</p>
  
  <p><img src="https://i.stack.imgur.com/aZ7oz.jpg" alt="The CollectionView">, </p>
  
  <p>Im trying to get each itemview to have an onclick event that will open a nested view that passes the data from the itemview via underscore templates.
  Here is a swapview example (not mine btw): http//jsfiddle.net/VLY4t/14/ </p>
  
  <p>Here is what my code looks like (the second pic) (notice I have a backbone router by the url hash, but am unable to render underscore templates). Any help is greatly appreciated.:
  Working Example would be: The Dog's breed is &lt;%= name %>
  <img src="https://i.stack.imgur.com/YoJ1V.jpg" alt="Child from Itemview"></p>
  
  <p>The client side template and UI is this:
      
      
      </p>
  
  <pre><code>&lt;script type="text/template", id="dogs-template"&gt;
  &lt;ul&gt;&lt;ul&gt;
  &lt;/script&gt;
  
  &lt;script type="text/template", id="dog-template"&gt;
  &lt;a href="dogs/&lt;%= name %&gt;"&gt; &lt;%= name %&gt;
  &lt;/script&gt;
  
  &lt;script type="text/template", id="play-template"&gt;
  p This dog's breed is &lt;%= name %&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>And the Javascript is:</p>
  
  <pre><code>//Im serving data via RESTful JSON, but the data looks like this
  var dogs = [{name: 'yorkie'}, {name: 'pitbull'}, {name: 'dobberman'}, etc]
  
  App = new Backbone.Marionette.Application();
  
  App.addRegions({
  mainRegion: "#content",
  playRegion: "#play"
  });
  
  //Call the backbone history here
  
  App.on("initialize:after", function(options){
    if (Backbone.history){
      Backbone.history.start({pushState: true});
    }
  });
  
  
  //Call the Controller
  
  
  Controller = {
  
  
  };
  
  // Start the models n collections
  
  Dog = Backbone.Model.extend({
  
  });
  
  Dogs = Backbone.Collection.extend({
  model: Dog,
  url: '/jonas',
  
  });
  
  DogView = Backbone.Marionette.ItemView.extend({
  template: "#dog-template",
  tagName: 'li',
  initialize: function(){
          //var moot = _.bindAll(this.model);
  
      },
  
  
  
  events: {
  "click" : function() {
        //show new region here
  
        App.playRegion.show(theplayview);
  
      }
    }
  
  });
  
  PlayView = Backbone.Marionette.ItemView.extend({
  template: '#play-template'
  
  });
  
  DogsView = Backbone.Marionette.CollectionView.extend({
  template: "#dogs-template",
  itemView: DogView
  })
  
  var doggies = new Dogs();
  var bob = doggies.fetch({async: false});
  
  var doggyview = new DogsView({collection: doggies});
  
  App.mainRegion.show(doggyview);
  
  var theplayview = new PlayView(this.model);
  
  
  MyRouter = Backbone.Marionette.AppRouter.extend({
  controller: Controller,
  
  
      appRoutes: {
          "": "route1",
  
          "testrouter": "route2",
  
          "testrouter#dogs": "route3",
  
          "testrouter#dogs/:id": "route4",
  
  
      },
  
  
  });
  
  App.addInitializer(function(){
  console.log("Router is on")
  new MyRouter();
  });
  
  
  App.on("initialize:after", function(){
  
  
  }); 
  
  App.start();
  </code></pre>