3

I have a single view with one inline page inside and a couple of ajax pages. To activate the hash navigation I set: domCache: true because I want to use inline pages and ajax pages in combination. I see no reason why this shouldn't be possible.

What I expected is that the ajax pages wouldn't be loaded any more as soon as they are cached AND the cached page would be shown. But the ajax pages are being loaded further and the caching happens only after the second time the ajax page is being loaded (I thought they would be cached right after first loading) The cashed page remains in DOM and the ajax page is also loaded. So they are duplicated. The bad thing about it is, that it results also in duplication of id's - the code picks the cached page (which is the first in the dom) but the fresh loaded page is the one being displayed = the code isn't working after caching.

I also posted this issue on github but with no answer so help is highly apreciated.

I demonstrate what's happening when I load an ajax page, then navigate to the index inline-page and again to the ajax page.

The DOM after first ajax-questions-page loading:

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

The DOM after second ajax-questions-page loading:

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

Can I prevent this duplication somehow or is there a workaround?

UPDATE

I opened an issue/enhancement request on f7 github The you will also find a gif/video that shows what happens.

There is also a full repo to demonstrate the problem

Hexodus
  • 12,361
  • 6
  • 53
  • 72

1 Answers1

1

You need to create your own router so you can have full control of your application logic

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;
}
StefansArya
  • 2,802
  • 3
  • 24
  • 25