Ich versuche, eine App mit OnsenUI 2 (derzeit rc12) und jQuery (3.0.0) zu erstellen. Es gibt viele Beispiele, die ons.ready () verwenden, um ... etwas zu tun. Was mich verwirrt ist, dass das Beispiel Erste Schritte auf ihrer Website die Funktion verwendet. (Beide Beispiele sind Header der index.html)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
<script src="lib/onsen/js/onsenui.js"></script>
<script>
ons.ready(function() {
// Init code here
});
</script>
</head>
<body>
<ons-navigator>
<ons-page>
Page 1
</ons-page>
</ons-navigator>
</body>
</html>
Die Vorlagen in Visual Studio 2015 tun dies jedoch nicht.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<!-- JS dependencies (order matters!) -->
<script src="scripts/platformOverrides.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<!-- CSS dependencies -->
<link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />
<title>Onsen UI Tabbar</title>
<!-- App init -->
<script>
function alertMessage(){
ons.notification.alert('Tapped!');
}
document.addEventListener('init', function(event) {
var page = event.target;
if(page.id === "home-page") {
var i = 5,
onsListContent = '',
onsListItem = document.querySelector('#main-list').innerHTML;
while(--i) {
onsListContent += onsListItem;
}
document.getElementById('main-list').innerHTML = onsListContent;
}
if(page.id === "settings-page") {
}
});
</script>
Die OnsenUI-Dokumentation für die Registerkartenleiste (Layoutvorlage; wie im VS2015-Beispiel) verwendet sie jedoch (zeigt sie jedoch nicht im Kontext an).
ons.ready(function() {
var myTabbar = document.querySelector("ons-tabbar")
myTabbar.addEventListener("prechange", function(e) {
if (e.index == 1) {
e.cancel();
}
})
})
Die interaktiven OnsenUI-Tutorials sind dieselben. Etwa die Hälfte von ihnen benutzt es und die andere nicht. Wann soll ich es benutzen?
Ich denke, die kurze Antwort ist, es immer zu verwenden - auf diese Weise sparen Sie sich Ärger.
Grundsätzlich wird sichergestellt, dass die Funktion erst ausgeführt wird, nachdem die Onsen-Benutzeroberfläche bereit ist. Der Versuch, vor diesem Moment etwas zu tun, ist also ein wenig riskant. Grundsätzlich benötigt die Onsen-Benutzeroberfläche beim Starten Ihrer App einige Zeit, um alle Komponenten (alle ons-xxxElemente) sowie einige andere Dinge zu initialisieren .
In Bezug auf Ihre vorherige Frage - eigentlich versucht es auch universeller zu sein, so dass Sie die anderen 2 hier genannten Methoden nicht benötigen.
Außer auf seine Komponenten zu warten, wartet es auch DOMContentLoadedim Browser und devicereadybei Verwendung in einem Gerät mit Cordova / Phonegap usw.
Also im Grunde , wenn die Funktion ausgeführt wird Sie gewährleistet einen richtigen dom Baum, onsen ui Methoden auf den geladenen Elemente haben, sowie backbutton, pauseetc Ereignisse von cordova.
Wenn Sie nur einen einfachen Ereignis-Listener hinzufügen möchten, bei dem Sie mit onsen nichts Besonderes tun, können Sie ihn nicht verwenden, aber es ist nur sicherer und einfacher, wenn Sie dies tun. In den Demos wird es wohl die meiste Zeit nicht wirklich benötigt, aber manchmal fügen wir es einfach aus Gewohnheit hinzu. Mein Vorschlag wäre, es in allen Initialisierungen Ihrer Apps zu verwenden.
Und jetzt noch ein kleiner Hinweis zu Ihrer vorherigen Frage: Wenn Sie eine Seite in einer Registerkarte / einem Navigator / Splitter usw. verwenden, stellen wir nicht sicher, dass das Laden synchron ist, da Sie stattdessen auch die Möglichkeit haben, eine Seite vom Server zu laden.
Daher müssen Sie warten, bis die Seite selbst geladen ist (dies geschieht ons.readymeistens). Sie haben die initVeranstaltung bereits gefunden . Das ist es, was Sie in den meisten Fällen benötigen würden.
Sie können einen Handler auf zwei Arten hinzufügen:
// Pure JS
document.addEventListener('init', function(e){
if (e.target.id === 'myPage') {
// have fun
}
});
// jQuery
$(document).on('init', function(e){
if (e.target.id === 'myPage') {
// have fun
}
});
In jQuery können Sie einen Selektor als zusätzliches Argument hinzufügen, sodass Sie theoretisch auch in der Lage sein sollten, so etwas zu tun
$(document).on('init', '#myPage', function(e){
// have fun
});
Beachten Sie, dass myPagedies die ID der Seite sein muss , nicht die Vorlage .
Bonus - Wenn Sie etwas direkt nach dem Anzeigen der Seite ausführen möchten (z. B. eine Animation), können Sie showstattdessen das Ereignis verwenden.
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen