title: underscore.js template || bind/append backbone
body: <p>I asked question the other day on this app; after some good advice, I moved on and I now think this is a different issue.
  Before, I was not getting any display on the screen/no errors or any console.logs. After working on it some more, I now have my model/view and some of my render function working. </p>
  
  <p>I think the issue is with my template or with my append. Below is the full code as it stands now. There are //comments where I think there maybe some issues. 
  Any help with this would be greatly appreciated. </p>
  
  <p><strong>EDIT ::</strong> Thanks for the advice Niranjan. I made some the changes you mentioned; I took away the counter and sample data. With these new changes, my newsFeed.js is no longer being read and so I am unclear as to how to populate my collection. When I console.log out my collection I get an empty array with my defaults shown, but with the json file not being read in the first place how do I get anything to work?</p>
  
  <p><strong>EDIT#2 ::</strong> Thank you again Niranjan. With the changes you suggested and a few of my own, I now have the code below. The issue I have right now, Is my array is being populated far too many times. the JSON file has 8 entries in total and because of my _.each statement in my template it is looping 8 times where I only want it to loop once and then to split the array into separate entries. I tried first splitting it during my response parse but this didn't work, do you have any advice for this?</p>
  
  <p><em>below the code is links to the live views of code and html/broswer content including a link to the JSON file.</em></p>
  
  <p>My end goal is to click on one title and have the corresponding content show.</p>
  
  <pre><code>        (function(){        
  
      var NewsFeedModel  = Backbone.Model.extend({
          defaults: {
              title: '',
              content: ''
          }
      });
  
      var NewsFeedCollection  = Backbone.Collection.extend({
          model: NewsFeedModel,
          url : 'newsFeed.js',
              parse: function(response) {
                  console.log('collection and file loaded');
               return response.responseData.feed.entries;
              }
      });
  
      var NewsFeedView = Backbone.View.extend({
          el : '.newsContainer ul',
          template: _.template($("#feedTemp").html()),  
          initialize: function(){ 
           var scopeThis = this;
              _.bindAll(this, 'render');
  
                  this.collection.fetch({
                      success: function(collection){
                          scopeThis.render();
                      }
                  });
  
                  this.collection.bind( 'add',  this.render, this);
                  console.log('View and Template read');
      },  
      render: function () {
              this.$el.html(this.template({
              feed: this.collection.toJSON() 
        }));
        console.log(this.collection.toJSON());
      }
  
  });
  
   var newsFeedCollection = new NewsFeedCollection();
  
  
      var newsFeedView = new NewsFeedView({
      collection: newsFeedCollection
  });
  
  var title = newsFeedCollection.find('title');
  var content = newsFeedCollection.find('content &gt; title'); 
  
  $(document).on("click", "#add", function(title, content) { 
      console.log("I have been clicked"); 
  
      if($(title) == $(content)){
      console.log('they match');
      }
      else{
      console.log('they dont match');
      }
  $('.hide').slideToggle("slow");
  
  
  });
  
  
  }());
  </code></pre>
  
  <p>This is my underscore template.</p>
  
  <pre><code>   &lt;div class="span12"&gt;
  &lt;script id="feedTemp" type="text/template"&gt;
      &lt;% _.each(feed, function(data) { %&gt; 
         &lt;div id = "titleContent"&gt; 
           &lt;a href='#' id ="add"&gt; &lt;%= data.title %&gt; &lt;/a&gt;
               &lt;div id="content" class="hide"&gt;
                  &lt;%= data.content %&gt;
               &lt;/div&gt; 
         &lt;/div&gt;
  &lt;% }); %&gt;
  &lt;/script&gt;           
  &lt;/div&gt;
  </code></pre>
  
  <p>I am using google drive as a testing ground; links for the full html/code.
  <a href="https://docs.google.com/file/d/0B0mP2FImEQ6qa3hFTG1YUXpQQm8/edit" rel="nofollow">https://docs.google.com/file/d/0B0mP2FImEQ6qa3hFTG1YUXpQQm8/edit</a> [code View]
  <a href="https://googledrive.com/host/0B0mP2FImEQ6qUnFrU3lGcEplb2s/feed.html" rel="nofollow">https://googledrive.com/host/0B0mP2FImEQ6qUnFrU3lGcEplb2s/feed.html</a> [browser View]
  <a href="https://docs.google.com/file/d/0B0mP2FImEQ6qbnBtYnVTWnpheGM/edit" rel="nofollow">https://docs.google.com/file/d/0B0mP2FImEQ6qbnBtYnVTWnpheGM/edit</a> [JSON file]</p>