Ich entwickle hier eine Webapp mit HTML und jQuery Mobile (JQM), also bin ich ziemlich neu dabei. Was ich hier versuche, ist, eine JQM-Listenansicht mit einer Liste von Namen zu füllen. Jeder dieser Namen wird mit einer neuen Seite verknüpft, auf der persönliche Daten angezeigt werden (vollständiger Name, Adresse, Geburtsdatum usw.).
Derzeit, wegen meiner Unkenntnis, erstelle ich manuell eine neue .html-Datei für JEDE einzelne Person (z. B. johnDoe.html für einen fiktiven Charakter Mr. John Doe). Ich verknüpfe dann die Listenelemente über die Funktion physisch mit dieser HTML-Datei.
Das Problem ist jetzt, dass ich über 100 Personen habe, um diese Listenansicht zu füllen. Ich denke, dass es einen einfacheren Weg gibt, dies zu tun, als manuell mehr als 100 HTML-Dateien für all diese Personen zu erstellen, richtig?
Ich habe von dieser JSON-Sache gehört, die den Trick machen könnte, aber aus dem Hintergrund des NULL-Computing-Wissens verstehe ich nicht wirklich, wie es funktioniert. Will jemand bitte etwas Licht auf wie kann ich das tun?
Vielen Dank!
BEARBEITEN: Ich verwende Dreamweaver CS5.5 zum Codieren. Für diese Webapp, die ich entwickeln soll, bekam ich eine "Vorlage" oder eine Art, die JQM und Backbone.js verwendet. Daher scheint die "mehrseitige" Struktur für eine einzelne HTML-Datei irgendwie nicht zu funktionieren. Von dem, was ich in der Vorlage sehe, hat jede HTML-Datei eine entsprechende JS-Datei mit Code, der folgendermaßen aussieht:
%Vor% Für die HTML-Seiten beginnen alle mit einem <div data-role=header> -Tag, dann einem <div data-role=content> , bevor sie mit einem <div data-role=footer> enden, alle mit ihrem jeweiligen Inhalt innerhalb der öffnenden und schließenden Tags.
Bei meiner fraglichen Listenansicht befindet sich der JQM-Code für die Listenansicht innerhalb des <div data-role=content> -Teils der HTML-Datei. Wie kann ich diese Listenansicht dann mit JSON-Daten füllen?
(Entschuldigung, wenn ich extrem noob anhöre, denn ich bin wirklich & gt;. & lt; Wirklich die Hilfe zu schätzen!)
Ja. Es ist möglich, zwei Seiten zu haben und eine für die Anzeige Ihrer Daten und eine für die Anzeige der Details des angeklickten Artikels zu verwenden. Ich musste ein paar alte Sachen reinziehen, eine Demo, die ich gemacht habe, als jQM in der Version 1.1 war, und sie in moderne Zeiten umwandeln. Wie auch immer, wenn man bedenkt, dass ich ein Array wie folgt habe:
%Vor%Ich habe zufällig Sachen erzeugt und es zu 100 Elementen gemacht, genau wie du es scheinbar hast. Ich habe zwei Seiten.
%Vor% Die erste Seite #info-page dient zum Anzeigen von Daten in einer Listenansicht. Die zweite Seite, #details-page , dient der Information des angeklickten Artikels. Das ist alles was du brauchst. Nur zwei Seiten, nicht mehr als das. Also jedes Mal, wenn ein Klick passiert, machst du folgendes über JavaScript
li in der Liste klicken, erhalten Sie das vierte Objekt aus dem Array, das alle Daten enthält. Speichern Sie es in der Datenvariablen der zweiten Seite, damit es später abgerufen werden kann. Etwas wie das:
%Vor% Umleiten Sie dann zur zweiten Seite mit changePage , wie folgt:
Wenn die zweite Seite geöffnet wird, verwenden Sie das pagebeforeshow -Ereignis, um die Daten von der Seite zu erhalten (die Sie auf dieser Seite gespeichert haben, als auf das Tag auf der vorherigen Seite geklickt wurde.
Verwenden Sie ein HTML-Layout, um die Daten zu füllen. Ich habe die Gitter von jQM benutzt.
Das ist alles Leute!
Ich habe das mit dem HTML verwendete JS angehängt. Es ist selbsterklärend. Lesen Sie die Inline-Kommentare im Code und Sie werden mehr verstehen. Angenommen, info ist das Array im Bild.
Ich habe auch eine Demo gemacht, wo du mehr darüber auf jsfiddle.net lesen kannst. Hier ist der Link: Ссылка
Sie können so etwas ausprobieren
Aktualisiert
Html Seite
%Vor%Javascript
%Vor%Tags und Links json listview jquery-mobile