title: Backbone Collection not rendering when going back
body: <p>I have a Backbone app I'm building with Trigger.io, and have a bit of confusion why data is disappearing when I click the back button in the phone toolbar.</p>
  
  <p>Here's the setup:</p>
  
  <p>I have a view, SearchResultsView, that looks like this (Trigger.io code removed for brevity):</p>
  
  <pre><code>window.SearchResultsView = Backbone.View.extend({
  
  initialize: function() {
      this.template = _.template($('#searchResultsView-template').html());
  },
  
  render: function() {
  
      var self = this;
      var renderedContent = this.template();
      $(this.el).html(renderedContent);
  
      if (window.resultsCollection) {
          self.drawList(window.resultsCollection);
      }
  
      return this;
  },
  
  events: {
      "click #submitQuery" : "processClick"
  },
  
  drawList: function(collection) {
  
          collection.each(function(place){
              window.console.log(place.get("name"));
              $("#resultsList").append("&lt;li&gt;&lt;a href='#locationdetail/"+place.id+"' class='link'&gt;" + place.get("name") +"&lt;/a&gt;&lt;/li&gt;");
          });
  },
  
  processClick: function() {
  
      var self=this;
      this.querystring = $("#searchBox").val(); //get the query
  
      window.resultsCollection = new Places(null, {query: this.querystring}); 
      window.resultsCollection.fetch(); //this is fetching via a call to the FourSquare API, and populating the models in the collection with that data
  
      window.resultsCollection.bind('reset', function(collection){
          self.drawList(collection);
      });
  }
  
  });
  </code></pre>
  
  <p>Here is the template:</p>
  
  <pre><code>&lt;script type="text/template" id="searchResultsView-template"&gt;
  &lt;div id="searchbar"&gt;&lt;/div&gt;
  &lt;h1&gt;Results Bitch&lt;/h1&gt;
      &lt;input type="text" id="searchBox"&gt;&lt;/input&gt;
      &lt;input type="submit" id="submitQuery"&gt;&lt;/input&gt;
      &lt;ul data-role="listview" id="resultsList"&gt;
      &lt;/ul&gt;
      &lt;a href="locationdetail"&gt;Click me&lt;/a&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is the router:</p>
  
  <pre><code>searchresults: function() {
      this.searchresults = new SearchResultsView({});
      $('#container').empty();
      $('#container').append(this.searchresults.render().el);
  },
  </code></pre>
  
  <p>Here's how it works in practice: when I initially load the page, there's no list of results (as it should be). I enter the query and execute the search, and it comes back, populating the list as it should. Then, I'll click on an item to go to another view, and when I click "Back", the list is empty again. </p>
  
  <p>What I'm trying to do is test to see if the collection still exists, and if it does, go ahead and re-render the list, but it's never rendering the list. The collection <em>does</em> exist, as I'm able to log it to the console and see the data. </p>
  
  <p>My suspicion is that the #resultsList element isn't available yet, and so when it goes to append the results to it, it can't find it, thus not showing anything. </p>
  
  <p>So:</p>
  
  <ul>
  <li>Does this sound right?</li>
  <li>Why? How is this different than the initial load, when things work fine?</li>
  </ul>
  
  <p>Hopefully I'm clear enough. I haven't included the model and collection, to keep things short. If those will help, I'm happy to include them (although, I tend to think this is a view issue).</p>
  
  <p>Thanks!</p>