So bleiben Sie DRY, wenn Sie Javascript- und ERB-Vorlagen (Rails) verwenden

8

Ich baue eine Rails-App, die Pusher verwendet, um Web-Sockets zu verwenden, um Updates direkt auf den Client zu übertragen. In Javascript:

%Vor%

Das ist eine böse Mischung aus Code und Präsentation. Die natürliche Lösung wäre also, eine JavaScript-Vorlage zu verwenden. Vielleicht Öko oder Schnurrbart:

%Vor%

Das ist gut und alles, außer, ich wiederhole mich . Die Moustache-Vorlage ist zu 99% identisch mit den ERB-Vorlagen, die ich bereits geschrieben habe, um HTML vom Server zu rendern. Der beabsichtigte Ausgang / Zweck der Schnurrbart- und ERB-Vorlagen ist zu 100% gleich: ein Tweet-Objekt in Tweet-HTML umzuwandeln.

Was ist der beste Weg, um diese Wiederholung zu beseitigen?

UPDATE: Obwohl ich meine eigene Frage beantwortet habe, möchte ich wirklich andere Ideen / Lösungen von anderen Menschen sehen - daher die Prämie!

    
user94154 25.02.2011, 19:36
quelle

5 Antworten

5

Imo die einfachste Möglichkeit, dies zu tun, würde AJAX verwenden, um die Seite zu aktualisieren, wenn ein neuer Tweet erstellt wird. Dazu müssten zwei Dateien erstellt werden, von denen die erste eine html.erb-Standarddatei und die zweite eine js.erb-Datei ist. Html.erb ist das Standardformular, das alle Tweets durchlaufen und anzeigen kann, nachdem sie aus der Datenbank gezogen wurden. Die js.erb-Datei wird Ihr einfaches Javascript sein, um bei der Erstellung einen neuen Tweet anzuhängen, d. H .:

%Vor%

In Ihrem Formular für den neuen Tweet müssten Sie hinzufügen:

%Vor%

was AJAX aktiviert. Dann müssen Sie in der Erstellungsaktion folgenden Code hinzufügen:

%Vor%

Wenn Sie in diesem Fall einen Tweet mit einem AJAX-fähigen Formular posten, würde er auf den Aufruf reagieren, indem er den Code in create.js.erb ausführt (was der $ ('# timeline'). append-Code wäre von oben). Andernfalls wird es an die Stelle weitergeleitet, an die Sie es senden möchten (in diesem Fall "Index" für Tweets). Dies ist der beste und klarste Weg, um zu erreichen, was Sie zu tun versuchen.

    
Will Ayd 01.03.2011, 18:36
quelle
3

Bisher war die beste Lösung, die ich fand, Isotope .

Sie können Vorlagen mit Javascript schreiben, das sowohl vom Client als auch vom Server gerendert werden kann.

    
user94154 28.02.2011 01:49
quelle
3

Ich würde alle Tweets mit Javascript rendern. Anstatt den HTML-Code auf dem Server zu rendern, legen Sie die Anfangsdaten im Kopf Ihrer Seite als JS fest. Wenn die Seite geladen wird, rendern Sie die Tweets mit JS.

In deinem Kopf:

%Vor%

In einer JS-Datei:

%Vor%     
Jordan 02.03.2011 15:22
quelle
2

Ich habe das nicht versucht, aber das ist mir als mögliche Lösung aufgefallen:

Erstellen Sie in Ihrer Ansicht ein verstecktes div, das eine Beispielvorlage enthält (ich verwende HAML hier zur Verkürzung):

%Vor%

Ihr Tweet kann einen Tweet so darstellen, wie Sie es jetzt tun.

%Vor%

Wenn Sie einen Tweet-Prototyp erstellen, legen Sie die Felder fest, die Sie für die js-template-Ersetzungssyntax verwenden möchten. Sie könnten dies auf jeden Fall austrocknen, aber ich füge es hier als Beispiel ein.

%Vor%

Auf dem Client würden Sie etwas tun wie:

%Vor%

Der letzte Teil wird davon abhängen, wie du dein Templating machst, aber es wäre so etwas.

Wie bereits erwähnt, habe ich diese Technik nicht ausprobiert, und es wird Ihnen nicht erlauben, Sachen wie Schleifen oder bedingte Formatierung direkt in der Vorlage zu machen, aber Sie können das mit etwas Kreativität umgehen, da bin ich mir sicher.

Das ist nicht weit entfernt von dem, was Sie mit Isotope machen wollen, und in vielerlei Hinsicht ist es minderwertig, aber es ist definitiv eine einfachere Lösung. Persönlich mag ich haml und versuche, so viel wie möglich von mir zu schreiben, damit dies für mich persönlich eine bessere Lösung ist.

Ich hoffe, das hilft!

    
jonnii 01.03.2011 18:56
quelle
1

Um die Vorlage zwischen Javascript und Rails mit einer Moustache-Vorlage teilen zu können, gibt es smt_rails: Ссылка ("Shared bustache Vorlagen für Schienen 3 ") und auch Poirot: Ссылка .

    
bolmaster2 21.06.2012 13:15
quelle