Question

我有一个单独的视图，里面有一个内联页面和几个ajax页面。为了激活我设置的哈希导航：domCache: true，因为我想组合使用内联页面和ajax页面。我认为没有理由不应该这样做。

我的期望是ajax页面在缓存后不再被加载，并且将显示缓存页面。但是ajax页面正在被进一步加载，缓存只在第二次加载ajax页面之后才发生（我以为它们会在首次加载后立即缓存）兑现页面保留在DOM中，并且还加载了ajax页面。所以它们是重复的。它的坏处是，它也会导致id的重复 - 代码选择缓存的页面（这是dom中的第一个）但是新加载的页面是显示的页面=缓存后代码不起作用。

我也在github上发布了这个问题，但没有回答，所以帮助很大。

我演示了当我加载ajax页面时发生的事情，然后导航到索引内联页面并再次导航到ajax页面。

首先加载ajax-questions-page后的DOM：

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

第二个ajax-questions-page loading之后的DOM：

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

我能否以某种方式阻止此重复或是否有解决方法？

更新

我开了issue/enhancement request on f7 github 你还会找到一个显示会发生什么的gif /视频。

还有full repo to demonstrate the problem

Answer 1

您需要创建自己的路由器，以便完全控制应用程序逻辑

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;
}

Framework7 Domcache正在重复DOM中的ajax页面 - 如何解决这个问题？

1 个答案: