Wie kann ich HTML dynamisch mit Meteor Spacebars Vorlagen rendern?

8

Sagen wir, ich speichere <div>{{name}}</div> und <div>{{age}}</div> in meiner Datenbank. Dann möchte ich die erste HTML-Zeichenkette nehmen und sie in eine Vorlage rendern - {{> template1}} , die nur die erste Zeichenkette mit dem {{name}} -Lenker darin rendert. Dann möchte ich diese neu erzeugten Template / HTML-Daten geben, damit sie den Lenker mit dem tatsächlichen name aus der Datenbank füllen können, so dass wir <div>John</div> bekommen würden. Ich habe es versucht

%Vor%

Wo Vorlage1 als

definiert ist %Vor%

Und templateInfo ist der Helfer, der die oben erwähnte HTML-Zeichenfolge mit dem darin enthaltenen Lenker aus der Datenbank zurückgibt.

dataGetter ist genau das (nur ein Beispiel, ich arbeite mit anders benannten Sammlungen)

%Vor%

Ich kann den {{name}} nicht auffüllen. Ich habe es auf verschiedene Arten versucht, aber Meteor versteht nicht, dass der Lenker in der Saite mit den Daten ausgewertet werden muss. Ich bin auf 0.7.0, also kein Blaze, ich kann im Moment aufgrund der anderen Pakete, die ich benutze, nicht upgraden, sie haben einfach noch nicht die Version 0.8+. Irgendwelche Ideen, wie ich das zum Funktionieren bringen kann, werden sehr geschätzt.

    
Danail Gabenski 01.05.2014, 19:36
quelle

6 Antworten

1

Wenn Sie compile komplexe Vorlagen benötigen, würde ich Kellys Antwort vorschlagen.

Ansonsten haben Sie zwei Möglichkeiten:

  1. Erstellen Sie jede Vorlagenvariation und wählen Sie dann die richtige Vorlage:

    zB erstellen Sie Ihre Vorlagen

    %Vor%

    Und schließe sie dann dynamisch mit

    ein %Vor%

    Dabei ist templateName ein Helfer, der "age" oder "name"

    zurückgibt
  2. Wenn Ihre Vorlagen einfach sind, führen Sie die Substitution selbst durch. Sie können Spacebars.SafeString verwenden, um HTML zurückzugeben.

    %Vor%
nathan-m 01.05.2014, 23:52
quelle
9

In 1.0 funktionieren keine der oben beschriebenen Methoden. Ich habe das mit der unten im Client-Code definierten Funktion arbeiten lassen. Der Schlüssel war, die Optionen {isTemplate: true} an die Kompilierfunktion zu übergeben.

%Vor%

Das können Sie mit so etwas auf dem Client aufrufen:

compileTemplate('faceplate', '<span>Hello!!!!!!{{_id}}</span>');

Dies wird mit einer dynamischen Benutzeroberfläche in Ihrem HTML-Code gerendert

{{> Template.dynamic template='faceplate'}}

    
user3354036 14.11.2014 05:43
quelle
7

Sie können Zeichenketten auch selbst zu Templates kompilieren, indem Sie den Spacebar-Compiler verwenden. Sie müssen nur meteor add spacebars-compiler verwenden, um sie zu Ihrem Projekt hinzuzufügen.

In Projekten mit 0.8.x

%Vor%

In Projekten, die 0.9.x verwenden

%Vor%     
Kelly Copley 02.05.2014 17:05
quelle
3

Nach der Antwort von @ user3354036:

%Vor%

1) Fügen Sie dies in Ihrem HTML

hinzu %Vor%

2) Rufen Sie die compileTemplate-Methode auf.

%Vor%

Speichern Sie den Vorlagennamen in einer Sitzungsvariablen. Die Bedeutung davon wird im nächsten Punkt erläutert.

3) Schreiben Sie eine Hilfsfunktion, um den Vorlagennamen zurückzugeben. Ich habe Session-Variable dazu verwendet. Dies ist wichtig, wenn Sie den dynamischen Inhalt für ein Klickereignis hinzufügen oder wenn die übergeordnete Vorlage bereits gerendert wurde. Andernfalls werden Sie nie sehen, dass die dynamische Vorlage gerendert wird.

%Vor%

4) Schreiben Sie dies ist die gerenderte Methode der Elternvorlage. Hiermit wird die Sitzungsvariable zurückgesetzt.

%Vor%

Das hat für mich funktioniert. Hoffe es hilft jemandem.

    
Rushikesh Gomekar 25.02.2016 11:29
quelle
1

Glücklicherweise wurde die Lösung für dieses ganze Problem und andere Probleme wie die Meteor API in Form der Blaze-Paket , das Kern-Meteor-Paket, das reaktive Vorlagen ermöglicht. Wenn Sie sich die verknüpfte Dokumentation ansehen, bietet das Blaze-Paket eine lange Liste von Funktionen, die eine breite Palette von Lösungen zum programmatischen Erstellen, Rendern und Entfernen von sowohl reaktiven als auch nicht reaktiven Inhalten ermöglichen.

Um das oben beschriebene Problem zu lösen, müssten Sie folgende Dinge tun:

Berücksichtigen Sie zuerst die verschiedenen HTML-Chunks, die für die Anwendung dynamisch gerendert werden müssten. In diesem Fall wären diese Chunks <div>{{name}}</div> und <div>{{age}}</div> , aber sie könnten wirklich alles sein, was gültiger HTML-Code ist (obwohl es noch nicht Teil der öffentlichen API ist, werden Entwickler in Zukunft mehr Möglichkeiten haben, diesen Inhalt zu definieren auf eine dynamischere Art, wie hier in der Dokumentation erwähnt. Sie würden diese in kleine Template-Definitionen wie folgt einfügen:

%Vor%

und

%Vor%

Zweitens müsste die Definition für die Vorlage " firstTemplate " so geändert werden, dass sie einen HTML-Knoten enthält, der programmgesteuert referenziert werden kann:

%Vor%

Sie müssten dann eine Logik für Ihre firstTemplate Vorlage definieren, die einige der Funktionen des Blaze-Pakets nutzt, nämlich Blaze.With , Blaze.render und Blaze.remove (obwohl Sie die folgende Logik ändern und die Vorteile der Blaze.renderWithData funktioniert stattdessen; es basiert alles auf Ihrer persönlichen Vorliebe für die Art, wie Sie Ihre Logik definieren wollen - ich gebe nur eine mögliche Lösung zur Erklärung an.

%Vor%

Was wir also hier in der Funktion onRendered für Ihre firstTemplate Vorlage tun, ist dynamisch zu bestimmen, welche der Daten, die wir auf die Seite rendern wollen (entweder Name oder Alter in Ihrem Fall) und die verwenden Blaze.With() -Funktion zum Erstellen einer nicht gerenderten Ansicht dieser Vorlage mit dem Datenkontext der Vorlage firstTemplate . Dann wählen wir den Template-Elementknoten firstTemplate aus, in dem der dynamisch generierte Inhalt enthalten sein soll, und übergeben beide Objekte an die Funktion Meteor.render() , wodurch die nicht gerenderte Ansicht auf die Seite mit dem angegebenen Elementknoten als Parent-Knoten gerendert wird des wiedergegebenen Inhalts.

Wenn Sie die Details für die Funktion Blaze.render() lesen, werden Sie sehen, dass dieser gerenderte Inhalt reaktiv bleibt, bis die gerenderte Ansicht mit der Funktion Blaze.remove() entfernt wird oder der angegebene übergeordnete Knoten aus dem DOM entfernt wird. In meinem obigen Beispiel nehme ich den Verweis auf die gerenderte Ansicht, die ich vom Aufruf von Blaze.render() erhalten habe, und speichere sie direkt auf dem Vorlagenobjekt. Ich tue das so, dass, wenn die Vorlage selbst zerstört wird, ich die gerenderte Ansicht manuell in der Callback-Funktion onDestroyed() entfernen kann und sicher sein kann, dass sie wirklich zerstört ist.

    
n4tiv3pwnst4r 18.08.2015 01:56
quelle
1

Eine sehr einfache Möglichkeit besteht darin, im onRendered-Event einen Aufruf an das globale Blaze-Objekt einzufügen.

%Vor%     
Adrian Badarau 26.01.2016 21:07
quelle