Dynamic Pages

Framework7 also allows to create Dynamic pages and load them on the fly, without making any additional Ajax request.

This is only possible with using Router API.

Everything that concerns loaded page structure, disabling swipe back for loaded page and going back in navigation, is the same as for usual Ajax Pages.

So to load Dynamic page we need to use View's .router.loadContent method where we need to pass HTML content of new page:

// Init app
var myApp = new Framework7();
 
// Init main view
var mainView = myApp.addView('.view-main');
 
// HTML Content of new page:
var newPageContent = '<div class="page" data-page="my-page">' +
                        '<div class="page-content">' +
                          '<p>Here comes new page</p>' +
                        '</div>' +
                      '</div>';
 
//Load new content as new page
mainView.router.loadContent(newPageContent);
 
// OR using .load method if need more options
mainView.router.load({
  content: newPageContent,
  animatePages: false
});

It is not very convenient to write multiline JavaScript, so if we use it often we may store Dynamic pages in script templates in index.html file:

<script type="text/template" id="myPage">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="center">My Page</div>
        </div>
    </div>
    <div class="page" data-page="my-page">
        <div class="page-content">
            <p>Here comes page content</p>
        </div>
    </div>
</script>  

And in JavaScript:

mainView.router.loadContent($('#myPage').html());

Dynamic Pages URL

By default, dynamic page url follows this rule: #content-{{index}}, where {{index}} will be replaced with page index number in navigation history. This rule can be changed by changin dynamicPageUrl parameter on App initialization