Wie kann ich eine JQM-Listenansicht richtig klonen?

Question

Ich habe eine Seite mit einem JQM-Listenansicht als Hauptinhalt. Dann wird zu einer anderen Seite navigiert, die dieselbe Listenansicht wie eine Seitenleiste verwenden muss. Mein erster Gedanke war, klon() zu verwenden, um die Liste korrekt auf die andere Seite zu klonen.

Dies funktioniert sehr gut, wenn die erste Seite ( Beispiel entfernt) bereits geladen wurde. Wenn der Benutzer jedoch direkt zur zweiten Seite navigiert (Beispiel entfernt), wird er beim Klonen der Liste nicht von JQM als Listenansicht initialisiert, sodass er nicht korrekt angezeigt wird. Ich kann nicht herausfinden, wie man das richtig initialisiert/klont.

Die betreffende Seite ist Beispiel entfernt.

Wenn mein Problem nicht klar ist, lass es mich wissen, und ich werde versuchen, es ein wenig zu klären.

Answer 1

Der Trick mit der Initialisierung der Aktualisierung war ein Schmerz herauszufinden, aber im Grunde war das trytry, um die Liste zu aktualisieren Ich klonte, und wenn dies fehlschlug (Ausnahme ausgelöst), initialisieren Sie die Klonliste. Wenn das Auffrischen erfolgreich war, war es bereits initialisiert und ich musste den Klon nicht initialisieren.

try { 
    // try to refresh the parent, if it works, we don't need to do anything 
    $('#To-Clone').listview('refresh'); 
} catch (e) { 
    // if refreshing the parent fails, then it wasn't initialized, and we need to initialize the child 
    $('#Clone').listview(); 
} 

Answer 2

Sie können eine Funktion deklarieren, die das Menü erstellt, sind sie auf jeder Seite Ihrer Website (wenn Sie nicht bereits eine globale JS Include-Datei haben Sie), und dann rufen Sie Ihren Menü zu erstellen, wann immer notwendig:

Andernfalls können Sie überprüfen, ob das Widget die .ui-listview Klasse hat, die während der Initialisierung angewendet wird.

//cache the clone 
var $clone = $('#my-element').clone(); 

//check if the clone has the initialized class 
if ($clone.hasClass('ui-listview')) { 

    //since this listview has already been initialized, refresh it 
    $('#my-container').append($clone).children().last().listview('refresh'); 
} else { 

    //initialize this listview clone 
    $('#my-container').append($clone).children().last().listview(); 
} 

Sie wollen Ihr listview Widget stellen Sie sicher, nicht eine ID hat, oder Sie werden die ID des Klons ändern möchten, bevor es auf das DOM anhängt, damit Ihre IDs eindeutig sind.