JQuery Mobile History on data-ajax=false

In building a mobile site using JQMobile. Due to the size of the project I decided to go to a multi-page approach (multiple html files). However, one of the pages I'm building makes more sense as a html file with multiple divs. In or开发者_如何学Cder to load these multiple divs I am forced to use either rel="external" or data-ajax="false" so that it pulls all the div's with data-role="page" and not just the first div on the page. However, this breaks the JQMobile's history and no longer displays a back button when using data-add-back-btn="true".

Does anybody know of a solution to pull multiple div's without forcing a full reload of the page? Or of a way to mix both paradigms yet conserve the history on JQMobile?

Working Example:

• http://jsfiddle.net/phillpafford/bfpN8/12/
• http://jsfiddle.net/phillpafford/bfpN8/14/ (with back navigation)

Main 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 -->    

External 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 -->