Wie mache ich eine progressive Verbesserung in einer HTML-Liste mit angularjs?

Angenommen, ich bin an eine barrierefreie Website gebunden, die mit JS deaktiviert sein wird.Wie mache ich eine progressive Verbesserung in einer HTML-Liste mit angularjs?

Ich habe eine News-Liste, die ich Zusammenfassung auf diese Weise:

<ul> 
    <li>News 1</li> 
    <li>News 2</li> 
    <li>News 3</li> 
</ul>

Jedesmal, wenn Sie die Seite neu zu laden, Sie die neuesten Nachrichten erhalten hinzugefügt, und die alten verworfen, wenn Sie mehr als 10 Nachrichten bekommen .

Nun, wenn ich Angulard JS verwendet habe, muss ich die Daten in ein Modell und eine ng-Wiederholung einfügen, und meine statische HTML loswerden. Die Liste wird dynamisch ausgefüllt, sodass Personen mit JS die Liste fast in Echtzeit aktualisiert sehen.

Was ich brauche ist, dass die beiden zusammenarbeiten. Ich brauche die statische Liste, und wenn JS aktiviert ist, möchte ich, dass die aktuellen Elemente in das Modell eingefügt und von angularjs verwaltet werden.

Jetzt ist meine aktuelle Art und Weise, es zu tun ist:

wenn mein Modell zu initialisieren, Parthe die Liste DOM, extrahieren die Daten manuell und entfernen Sie die alle untergeordneten Liste
Winkel Template-Code in der Liste injizieren
läßt Winkel seiner zaubern

es saugt, weil Sie die deklarative Güte des Winkels verlieren, und Sie haben eine Menge Kessel-Code ist nicht einmal generisch, so dass Sie es für Vorabend umschreiben Ry Widget auf Ihrer Seite.

Quelle

2012-11-06 e-satis

Ich würde nur die statische HTML ausblenden und das eckige DOM anzeigen, wenn Javascript aktiviert ist. Sie müssen das js-Modell dem von Ihnen generierten statischen HTML-Code hinzufügen, es ist nicht wirklich nett, aber der Versuch, Anfangsdaten von DOM zu erhalten, wird schwieriger zu handhaben sein. In einer perfekten Welt würden Sie die statische Seite mit einer Javascript-Engine und eckigen auf dem Server generieren, um Code/Vorlagen nicht replizieren zu müssen, aber es gibt keine einfache Möglichkeit, diese ATM zu verwenden. – Guillaume86

Es wäre nicht meine perfekte Welt, da ich nicht gerne in JS programmieren würde :-) Ich mag deinen Ansatz (du solltest es zu einer Antwort machen, damit ich updaten kann), weil es einfach und wartbar ist. Bt bedeutet das Hochladen der doppelten Größe des Datensatzes, also sind wir definitiv nicht in einer idealen Welt. –

Danke, ich werde eine kleine Antwort damit machen;) – Guillaume86

Es ist eine gute Frage, die mir schon bei der Verwendung einiger js-Frameworks in den Sinn kam.

Für den Moment würde ich nur die statische HTML ausblenden und das eckige DOM anzeigen, wenn Javascript aktiviert ist.

Sie müssen das js-Modell injizieren, das dem von Ihnen generierten statischen HTML entspricht, es ist nicht wirklich nett (nicht DRY), aber der Versuch, Anfangsdaten von DOM zu erhalten, wird IMHO schwieriger zu verwalten sein. Sie können alle Javascript/Templates in einer js-Datei bündeln, so dass die statische Seite nur einen Script-Import hat und die Seitengewichtung für Noscript-Viewer nicht beeinflusst wird.

Quelle

2012-11-06 17:14:22 Guillaume86

Denkst du es machbar, ein Plugin zu erstellen, das initial markup mit somes-Klassen markiert und automatisch in ein Modell lädt? Auf diese Weise konnte ich mein Problem lösen und das mit anderen teilen. Aber ich möchte keine Zeit darauf verwenden, wenn es nicht machbar ist. –

Es ist machbar, aber ich denke nicht, dass die Zeit Investition es wert ist verglichen mit der Einfachheit des Renderns in der Seite eines JSON-Objekts, das Ihre anfänglichen Modelldaten enthält. – Guillaume86

Wie mache ich eine progressive Verbesserung in einer HTML-Liste mit angularjs?

Antwort

Verwandte Themen