JQuery Mobileの歴史on data-ajax = false

Question

JQMobileを使用してモバイルサイトを構築しています。プロジェクトのサイズのせいで、私は複数ページのアプローチ（複数のhtmlファイル）に行くことに決めました。しかし、私が構築しているページの1つは、複数のdivを持つhtmlファイルとして意味があります。これらの複数のdivを読み込むには、rel="external"またはdata-ajax="false"のいずれかを使用するようにして、ページの最初のdivだけでなく、data-role="page"のすべてのdivをプルするようにします。しかし、これによりJQMobileの履歴が破られ、data-add-back-btn="true"を使用しているときに戻るボタンが表示されなくなりました。

誰かが、ページの完全なリロードを強制しないで複数のdivをプルするソリューションを知っていますか？あるいは、両方のパラダイムを混ぜ合わせて、JQMobileの歴史を保存する方法は？

Answer 1

実施例：

• http://jsfiddle.net/phillpafford/bfpN8/12/
• http://jsfiddle.net/phillpafford/bfpN8/14/

メインHTML

<div data-role="page"> 
    <div data-role="header"> 
     <h1>Demo Page</h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <h2>Lorem Ipsum</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper feugiat condimentum. Donec rutrum lectus tortor, et pharetra sapien. Sed sollicitudin lectus sed urna consectetur sagittis. Pellentesque at arcu dui. Curabitur molestie velit id neque mattis vestibulum. Sed sit amet ante at tellus volutpat tempor quis eu magna. Pellentesque elementum semper congue. Praesent vitae eros id ante dapibus commodo. Aliquam leo nisi, feugiat eu imperdiet sed, tincidunt in lacus. Praesent bibendum dapibus vestibulum. Fusce condimentum bibendum libero eu aliquet.</p> 
     <ul data-role="listview" data-dividertheme="d" style="margin-top: 0;"> 
      <li><a href="http://jsfiddle.net/phillpafford/rGacN/4/embedded/result/" rel="external" data-transidiont="slide">Link 1 (External)</a></li> 
      <li><a href="#internal">Internal Link1</a></li> 
      <li><a href="#internal2">Internal Link2</a></li> 
      <li><a href="#internal3">Internal Link3</a></li> 
     </ul> 
    </div><!-- /content --> 
</div><!-- /page -->  

外部HTML（バックナビ付き）

<div data-role="page"> 
    <div data-role="header"> 
     <a data-rel="back">Back</a> <!-- Here you add the data-rel --> 
     <h1>External Demo Page</h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <h2>Lorem Ipsum</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper feugiat condimentum. Donec rutrum lectus tortor, et pharetra sapien. Sed sollicitudin lectus sed urna consectetur sagittis. Pellentesque at arcu dui. Curabitur molestie velit id neque mattis vestibulum. Sed sit amet ante at tellus volutpat tempor quis eu magna. Pellentesque elementum semper congue. Praesent vitae eros id ante dapibus commodo. Aliquam leo nisi, feugiat eu imperdiet sed, tincidunt in lacus. Praesent bibendum dapibus vestibulum. Fusce condimentum bibendum libero eu aliquet.</p> 
    </div><!-- /content --> 
</div><!-- /page -->