Für die Rückgabe einer jQuery Mobile-Seite ist kein re-get_jquery erforderlich

jQuery Mobile ist ein Front-End-Entwicklungsframework zum Erstellen mobiler Webanwendungen.

jQuery Mobile kann auf Smartphones und Tablets verwendet werden.

jQuery Mobile verwendet minimale HTML5- und CSS3-Skripte zum Layouten von Webseiten.

Kürzlich hat mir das Web-App-Projekt des Unternehmens die Ehre gegeben, weiterhin mit jQuery Mobile in Kontakt zu treten und es kennenzulernen. Dies ist in der Tat eine sehr gute Bibliothek für die mobile Entwicklung, die Ingenieuren, die sich mit der Webentwicklung auskennen, dabei hilft, schnell loszulegen und ihre eigenen mobilen Anwendungen zu erstellen. Aber in den letzten zwei Tagen bin ich auf ein Problem gestoßen, das dazu führte, dass ich viele Informationen überprüfte, aber keine gute Lösung finden konnte. Am Ende war ich gezwungen, den Quellcode von jQuery Mobile zu lesen und eine Erweiterung zu schreiben, um es zu lösen . Bitte lassen Sie es mich unten erklären.

Problembeschreibung

Angenommen, es gibt drei Seiten im Projekt, nämlich main.html, test1.html, test2.html (im Folgenden als main, test1 bzw. test2 bezeichnet), wobei die Hauptseite einen Link zur test1-Seite enthält (d. h. ein Tag), test1 hat einen Link mit dem Attribut data-rel="back" und einen Link zu test2, und test2 hat nur einen Link mit dem Attribut data-rel="back". Klicken Sie nach der Übertragung von „Haupt“ auf „Test1“ auf den „Zurück“-Link, um zu „Haupt“ zurückzukehren (entspricht dem Klicken auf die Zurück-Schaltfläche des Browsers). Es ist jedoch nicht erforderlich, die Get-Anfrage erneut zu senden, wenn Sie auf „Test2“ auf den „Zurück“-Link klicken Seite und möchten zu test1 zurückkehren, wird eine Get-Anfrage erneut gesendet. Das dadurch verursachte Problem besteht darin, dass alle von test1 ausgeführten Vorgänge nach der Rückkehr von test2 ungültig sind. Beispiel: A ist eine paginierte Listenseite. Wenn Sie zur zweiten Seite wechseln und dann zu B weiterleiten, können Sie bei der Rückkehr zu A nicht zur zweiten Seite wechseln.

Ursachenanalyse

Ich habe zuerst Firebug verwendet, um mir die Struktur des HTML anzusehen, und festgestellt, dass jQuery Mobile main und test1 zur Seitenstruktur hinzufügt. Wenn es von test1 zu test2 wechselt, wird test1 automatisch gelöscht, sodass der Dom-Baum entsteht Enthält nur main und test2. Wenn test2 also test1 zurückgibt, wird eine Get-Anfrage gesendet. Bedeutet das, dass dieses Problem gelöst werden kann, solange die historischen Seiten im Dom zwischengespeichert werden können (genau wie main und test1)?

Lösen Sie das Problem

Nach einigem Suchen habe ich auf der offiziellen Website von jQuery Mobile eine Beschreibung zum Thema „Seiten im DOM zwischenspeichern“ gesehen:

Seiten im DOM zwischenspeichern
Um alle zuvor besuchten Seiten im DOM zu behalten, setzen Sie die domCache-Option im Seiten-Plugin auf true, etwa so:
$.mobile.page.prototype.options.domCache = true;
Um nur eine bestimmte Seite zwischenzuspeichern, können Sie alternativ das Attribut data-dom-cache="true" zum Container der Seite hinzufügen:

(function($, undefined) {
$.fn.subpage = function(options) {
$(document).bind(
"pagebeforeshow",
function() {
var forword = $.mobile.urlHistory.getNext();
if (forword) {
var dataUrl = forword.url;
var forwordPage=$.mobile.pageContainer
.children(":jqmData(url='" + dataUrl + "')");
if(forwordPage){
forwordPage.remove();
}
}
$.mobile.urlHistory.clearForward();
});
};
$(document).bind("pagecreate create", function(e) {
$(":jqmData(role='page')", e.target).subpage();
});
})(jQuery); 

transitionPages( toPage, fromPage, settings.transition, settings.reverse )
.done(function() {
removeActiveLinkClass();
//if there's a duplicateCachedPage, remove it from the DOM now that it's hidden
if ( settings.duplicateCachedPage ) {
settings.duplicateCachedPage.remove();
}
//remove initial build class (only present on first pageshow)
$html.removeClass( "ui-mobile-rendering" );
releasePageTransitionLock();
// Let listeners know we're all done changing the current page.
mpc.trigger( "pagechange", triggerData );
});