title: How does History in jQuery Mobile work? (in particular when involving the back button)
body: <p>This history thing on jqm is driving me nuts... and every time I think I have the solution, it slips from my grasp.</p>
  
  <p>Here's the thing: I'm developing a dynamically generated content app. The pages are generated from JSON files and rendered using jsRender. They are loaded into the DOM (I'm using a jqm multi-page templating for this) on the first request and, on the following, they are simply called using a changePage pointing to that #id (the model I took inspiration from is this: <a href="http://jquerymobile.com/test/docs/pages/page-dynamic.html" rel="nofollow">http://jquerymobile.com/test/docs/pages/page-dynamic.html</a> ). Everything works fine but after a while the DOM becomes too crowded and slows down my system (in particular smartphones where I load the app into). The solution is to cancel the page just after it has been left by the user like in this project:
  <a href="http://roughlybrilliant.com/jsrender_json_apis_and_jquery_mobile" rel="nofollow">http://roughlybrilliant.com/jsrender_json_apis_and_jquery_mobile</a></p>
  
  <p>It uses the </p>
  
  <pre><code>$.mobile._bindPageRemove
  </code></pre>
  
  <p>instruction. Anyway, instead of using that, my first try was to use the .remove() instruction furnished by jQuery:</p>
  
  <pre><code>$("#" + entity.name + "-" + entityId).bind('pagehide', 
       function() {
           $(this).remove();
       });
  </code></pre>
  
  <p>So whenever a page is hidden, it is removed from the DOM. So let's say we'd hit a link in my page to go to another, the starting page is deleted and the new one is loaded. 
  Here I have a back button, so when I hit it, it takes me back 1 step to the page I just deleted. Now in my code I have a function that builds the page again and shows it. Just to have the general idea of how my app works.</p>
  
  <p>Now let's say I can go deeper then 1 level in my tree of links: let's say I'm on lvl 2 and go to lvl 3 and then back to 2. In this case, the lvl 2 page does not have the back button, even if in the code I set it to be present.</p>
  
  <p>Here's the template in jsRender:</p>
  
  <pre><code>&lt;script id="header-buttons" type="text/x-jquery-tmpl"&gt;
      &lt;div data-role="header" data-position="inline" data-backbtn="true"&gt;
      &lt;h1&gt;{{:name}}&lt;/h1&gt;
      &lt;a href="#root" class="ui-btn-right" data-icon="home"&gt;Home&lt;/a&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>I thought it was because the remove instruction (or the $.mobile._bindPageRemove) was also removing the page from the history.. so I changed and used the empty() instruction to just empty the div and then re-populate it with what I needed... with no success. I can go back only 1 level in my tree if I remove the page after I visit it.</p>
  
  <p>My aim is to go around my app loading the pages dynamically and once I leave them, I just want to remove them from the DOM without altering the history, so when I go back and reload the page, I always have the back button available in the page.</p>
  
  <p>So my question(s) is(are): how the history works in jqm? When jqm enhances the page with its code does it add any indication for the back button on which page should it point to? How can I force the page to display the back button and point to the previous element in the history? Is it possible that if I remove something from the DOM it is NOT removed from history too? </p>
  
  <p>Thanks for the help, hope my concern is clear enough...</p>