title: Backbone and jQuery Mobile : same header on all pages
body: <p>I'm in charge of the development of a web application.</p>
  
  <p>I did a lot of research and I finally decided to develop this webapp with Backbone and jQuery Mobile. As you certainly know, there are some routing conflicts between jQuery Mobile and BackBone. I decided to use Backbone routing so I disabled jQM routing thanks to this tutorial : <a href="http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/" rel="nofollow noreferrer">http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/</a>.</p>
  
  <p>I started to build a sample application (without jQM) with only 3 views and a router. It works perfectly. You can run this application here. I voluntary put jQuery Mobile HTML tags for the next part.</p>
  
  <p><strong>Now, I would like to do the same thing with jQuery Mobile : keep the same header for all templates.</strong> The previous tutorial really helped me but I'm still confused about the DOM system of jQM.</p>
  
  <p>What I've tried is here :</p>
  
  <p><strong>index.html</strong> (<a href="http://pastebin.com/PcHDaZ2P" rel="nofollow noreferrer">pastebin.com/PcHDaZ2P</a>)</p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css"/&gt;
  
      &lt;!-- The Templates --&gt;
      &lt;script type="text/template" id="home"&gt;
              &lt;p&gt;This is Home page.&lt;/p&gt;
              &lt;ul data-role="listview"  data-inset="true"&gt;
                  &lt;li&gt;&lt;a href="#page1"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#page2"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/script&gt;
  
      &lt;script type="text/template" id="page1"&gt;
              &lt;p&gt;This is Page 1.&lt;/p&gt;
              &lt;ul data-role="listview" data-inset="true"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#page2"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/script&gt;
  
      &lt;script type="text/template" id="page2"&gt;
              &lt;p&gt;This is Page 2.&lt;/p&gt;
              &lt;ul data-role="listview" data-inset="true"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#page1"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/script&gt;
  
      &lt;!-- The Scripts --&gt;
      &lt;script src="lib/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jqm-config.js"&gt;&lt;/script&gt;
      &lt;script src="lib/jquery.mobile-1.0.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="lib/underscore-min.js"&gt;&lt;/script&gt;
      &lt;script src="lib/backbone-min.js"&gt;&lt;/script&gt;
      &lt;script src="js/main.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;!-- The fixed header --&gt;
      &lt;div data-role="header"&gt;
              &lt;a href="#" data-icon="home"&gt;Home&lt;/a&gt;
              &lt;h1&gt;Header&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;!-- THE CONTENT FOR THE TEMPLATES --&gt;
      &lt;div data-role="content" id="app-content"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>main.js</strong> (<a href="http://pastebin.com/2GXurpby" rel="nofollow noreferrer">pastebin.com/2GXurpby</a>)</p>
  
  <pre><code>window.HomeView = Backbone.View.extend({
  
      template:_.template($('#home').html()),
  
      render:function (eventName) {
          $(this.el).html(this.template());
          return this;
      }
  });
  
  window.Page1View = Backbone.View.extend({
  
      template:_.template($('#page1').html()),
  
      render:function (eventName) {
          $(this.el).html(this.template());
          return this;
      }
  });
  
  window.Page2View = Backbone.View.extend({
  
      template:_.template($('#page2').html()),
  
      render:function (eventName) {
          $(this.el).html(this.template());
          return this;
      }
  });
  
  var AppRouter = Backbone.Router.extend({
  
      routes:{
          "":"home",
          "page1":"page1",
          "page2":"page2"
      },
  
      initialize:function () {
          // Handle back button throughout the application
          $('.back').live('click', function(event) {
              window.history.back();
              return false;
          });
          this.firstPage = true;
      },
  
      home:function () {
          console.log('#home');
          this.changePage(new HomeView());
      },
  
      page1:function () {
          console.log('#page1');
          this.changePage(new Page1View());
      },
  
      page2:function () {
          console.log('#page2');
          this.changePage(new Page2View());
      },
  
      changePage:function (page) {
          console.log($(page.el));
          $(page.el).attr('data-role', 'page');
          page.render();
          $('#app-content').append($(page.el));
          var transition = $.mobile.defaultPageTransition;
          // We don't want to slide the first page
          if (this.firstPage) {
              transition = 'none';
              this.firstPage = false;
          }
          $.mobile.changePage($(page.el), {changeHash:false, transition: transition});
      }
  
  });
  
  $(document).ready(function () {
      console.log('document ready');
      app = new AppRouter();
      Backbone.history.start();
  });
  </code></pre>
  
  <p>But it doesn't work.</p>
  
  <p>So, can you help me to realize this system : have the same header for all templates and just a variable content in the <code>app-content</code> div with jQuery Mobile ?</p>