JQuery Mobile History на data-ajax = false

Question

При создании мобильного сайта с использованием JQMobile. Из-за размера проекта я решил перейти на многостраничный подход (несколько файлов HTML). Однако одна из страниц, которые я создаю, имеет больше смысла как HTML-файл с несколькими элементами div. Чтобы загрузить эти несколько элементов 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 -->