Mehrseitige App in Framework7

Question

Ich habe mehrere mehrseitige Anwendungen mit jQuery Mobile (JQM) entwickelt und plane, Framework7 zu verwenden.

In JQM ich mehrere HTML-Seiten zusammen mit ihren jeweiligen JS-Dateien

login.html 
login.js 

home.html 
home.js 

payment.html 
payment.js 

Alle js-Dateien erstellen, in ihren jeweiligen HTML-Seiten verknüpft sind

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

Wenn eine Seite $.mobile.changepage Verwendung geöffnet wird, Seite Ereignisse (Pageinit, Pageshow etc.) in der jeweiligen js werden ausgelöst. Alle Steuerungsereignisse werden als $('#element').on('click', function(e){});

behandelt. Ich bin jedoch nicht in der Lage, diese Funktionalität in Framework7 zu implementieren. Brauchen Sie eine Anleitung dazu. Ich habe versucht, JS zu HTML-Dateien hinzuzufügen, aber es wurde nicht hinzugefügt.

Answer 1

Als erstes zu beachten, Framework7 benötigt Initialisierung vor dem Ausführen eines Skripts.So müssen Sie Framework7 Js zuerst in HTML-Seite.Und für Framework7 Anwendung der Ansatz für die Seiten ist etwas anders als jQM. Es gibt zwei Arten von Seiten, die Sie in F7 erstellen können.
1) Sie können alle Seiten innerhalb einzelner HTML-Datei erstellen.
2) mehrere HTML-Seiten.
F7 hat bestimmte View-Definitionen, die beim Erstellen einer HTML-Seite wichtig sind. In F7 ist die Hauptansicht erforderlich. Nach der Initialisierung von f7 müssen Sie auch die Hauptansicht initialisieren.
Zum Navigieren zwischen den Seiten müssen Sie Router api.For dh verwenden:

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

Hauptansicht Objekt der Ansicht ist, die nach dem F7 init init braucht.

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

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

die F7-Master von Git herunterladen und das Beispiel überprüfen folder.It werden Sie gute Idee, über die ganze Ansicht und Seiten geben.
this helps

Answer 2

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

Ihre Seite Navigation in der App/Website lösen.