Многостраничное приложение в Framework7

Question

Я разработал несколько многостраничных приложений с использованием jQuery Mobile (JQM) и планирую использовать Framework7.

В JQM создать несколько HTML-страниц вместе с их соответствующими файлами JS

login.html 
login.js 

home.html 
home.js 

payment.html 
payment.js 

Все расслоением плотных файлы связаны в их HTML-странице

<div data-role="page"> 
    <script src="js/login.js"></script> 
</div> 

При открытии страницы с помощью $.mobile.changepage, страница события (pageinit, pageshow и т. д.) в соответствующем js get triggered. Все контрольные события обрабатываются как $('#element').on('click', function(e){});

Я, однако, не смог реализовать эту функциональность в Framework7. Нужно руководствоваться этим. Я попытался добавить JS в HTML-файлы, но не добавил.

Answer 1

Прежде всего, необходимо, чтобы Framework7 нуждалась в инициализации перед запуском любого скрипта. Поэтому вам нужно добавить фреймворк ja7 сначала в html-страницу. И для приложения framework7 подход к страницам немного отличается от jQM. Существует два типа страниц, которые вы можете создать в F7.
1) вы можете создавать все страницы внутри одного html-файла.
2) несколько страниц html.
F7 имеет определенные определения вида, которые важны при создании html-страницы. В F7 требуется основной вид. И после инициализации f7 вам также нужно инициализировать основной вид.
Для перехода между страницами, которые необходимо использовать маршрутизатор api.For именно:

mainView.router.load(selector) // selector can be data-page/html file name 

MainView является объектом View, который нужно инициализировать после F7 инициализации.

var myApp = new Framework7({ 
    // ... 
}); 

/* Initialize views */ 
var mainView = myApp.addView('.view-main', { 
    dynamicNavbar: true 
}) 
var anotherView = myApp.addView('.another-view'); 

Скачать мастер F7 из Git и проверить пример folder.It даст вам хорошее представление о всех целях и страницах.
Надеюсь, что это помогает

Answer 2

mainView.router.loadPage('ur_page.html'); 

Решит вашу страницу навигации в вашем приложении/сайта.