Framework7 Domcache дублирует страницы ajax в DOM — как решить эту проблему?

У меня есть одно представление с одной встроенной страницей внутри и парой страниц ajax. Чтобы активировать хеш-навигацию, я установил: domCache: true, потому что я хочу использовать встроенные страницы и страницы ajax в комбинации. Я не вижу причин, почему это не должно быть возможно.

Я ожидал, что страницы ajax больше не будут загружаться, как только они будут кэшированы, И будет показана кэшированная страница. Но ajax-страницы загружаются дальше и кэширование происходит только после второй загрузки ajax-страницы (я думал, что они будут кэшироваться сразу после первой загрузки). Кэшированная страница остается в DOM и ajax-страница тоже загружается. Поэтому они дублируются. Плохо то, что это также приводит к дублированию идентификаторов - код выбирает кешированную страницу (которая является первой в dom), но отображается только что загруженная страница = код не работает после кеширования .

Я также разместил эту проблему на github, но без ответа, поэтому помощь очень ценится.

Я демонстрирую, что происходит, когда я загружаю страницу ajax, затем перехожу к встроенной странице индекса и снова к странице ajax.

DOM после загрузки первой страницы ajax-вопросов:

<div class="views">
    <!-- view -->
    <div class="view view-main" data-page="questions">
        <div class="navbar">...</div>
        <!-- Pages container -->
        <div class="pages navbar-fixed toolbar-fixed">
            <!-- questions is the ajax page questions.html -->
            <div data-page="questions" class="page page-on-left">...</div>
            <!-- this is my inline page -->
            <div data-page="index" class="page page-on-left">...</div>
        </div>
        <!-- /pages -->
    </div>
    <!-- /view -->
</div>

DOM после загрузки второй страницы ajax-вопросов:

<div class="views">
    <!-- view -->
    <div class="view view-main" data-page="questions">
        <div class="navbar">...</div>
        <!-- Pages container -->
        <div class="pages navbar-fixed toolbar-fixed">
            <!-- questions is the ajax page questions.html -->
            <div data-page="questions" class="page page-on-left cached">...</div>
            <!-- this is my inline page -->
            <div data-page="index" class="page page-on-left">...</div>
            <!-- this shouldn't be happening -->
            <div data-page="questions" class="page page-on-center">...</div>
        </div>
        <!-- /pages -->
    </div>
    <!-- /view -->
</div>

Могу ли я как-то предотвратить это дублирование или есть обходной путь?

ОБНОВЛЕНИЕ

Я открыл запрос на выпуск/улучшение на f7 github. Вы также найдете gif/ видео, которое показывает, что происходит.

Существует также полный репозиторий, демонстрирующий проблему.


html ajax html-framework-7 dom7
person Hexodus    schedule 09.01.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно создать свой собственный маршрутизатор, чтобы иметь полный контроль над логикой вашего приложения.

var myApp = new Framework7({});
var mainView = myApp.addView('.view-main', {domCache: true});

var pageArray = {
    questions:'page/questions.html',
    index:'page/index.html'
};

function routeTo(pageName)
{
    if(pageArray[pageName]==undefined&&$('.page[data-page="'+pageName+'"]').length==0)
        return false;

    //If page was not in DOM then load a new one
    if($('.page[data-page="'+pageName+'"]').length==0)
        mainView.router.loadPage(pageArray[pageName]);

    //If page already in DOM then load that page
    else {
        mainView.router.load({pageName:pageName});

        //If pushState was enabled
        if(window.location.href.search('#!')!=-1) 
            history.replaceState({} , null,'#!/'+(pageArray.hasOwnProperty(pageName)?pageArray[pageName]:pageName));
    }

    /* Implement your own old page remover after new page was loaded 
        $('.page[data-page="'+pageName+'"]').remove();
    */

    return true;
}
person StefansArya    schedule 01.08.2017
comment
Спасибо, я попробую. Я также обновляю свой вопрос ссылками на репозиторий и запрос на выпуск/улучшение на github. - person Hexodus; 02.08.2017
comment
@stefansarya спасибо за решение. Но где вы вызываете routeTo? - person ytbryan; 30.08.2017
comment
Вы можете вызвать его с любой кнопки, например onclick="routeTo('questions')", или внутри скрипта. - person StefansArya; 30.08.2017