Jinja-Vorlage dynamisch hinzufügen

Question

Ich habe eine Jinja-Vorlage, die der einzige Inhalt innerhalb einer Reihe von div-Tags ist.

Wenn ich eine Taste drücke, möchte ich alles zwischen den Tags durch etwas anderes ersetzen. Ich hatte gehofft, es durch ein anderes Jinja-Template zu ersetzen, "{% include 'realpage.html'%}", aber zuerst bin ich nicht sicher, wie ich den ganzen Abschnitt ersetzen soll, anstatt nur ein einzelnes Wort zu ersetzen. Zweitens, kann ich sogar eine jinja-Vorlage dynamisch hinzufügen oder muss ich sie durch eine Zeichenfolge ersetzen, die den Inhalt der Datei direkt enthält.

Answer 1

Wie glls sagte, den Inhalt ersetzen kann verwendet werden,

document.getElementById("section0").innerHTML = "something"; 

Wie für eine jinja Vorlage dynamisch hinzufügen, müssen Sie die Innerhtml mit einem mehrzeiligen Zeichenfolge der gewünschten jinja Vorlage zu ersetzen, mit wird mit Backticks verwendet, "` ". So würde es aussehen,

document.getElementById("section0").innerHTML = `{% include 'realpage.html' %}`; 

Die Vorlage ausgeführt wird, wenn die Seite geladen wird (die so weit unvermeidbar ist, wie ich bin mir bewusst), so dass, wenn der HTML-Code der Live-Seite Inspektion, die mehrzeiligen Zeichenfolge wird enthalten, was auch immer in der Datei enthalten ist.

Answer 2

Sie könnten ein JS-Framework (wie Angular, React ...) verwenden, um dies zu erreichen ... Ich nehme an, Sie versuchen, eine einzelne Seite App zu erstellen?

Andernfalls müssen Sie mehr auf Javascript verlassen, um den HTML-Code unter Ihnen div je nachdem, was Sie klicken, zu ändern. Zum Beispiel, wenn Sie Button 1, 2, 3 haben. Jedes Rendering einer anderen HTML-Vorlage beim Anklicken.

Beispiel (mit jQuery):

$(document).on('click', '.some-class', function() { 
    document.getElementById("section0").innerHTML = "something"; 
}); 

FYI: "Etwas" kann eine HTML-Struktur sein.