Mit JQuery eine EJS-Vorlage in HTML einfügen

Question

Kann HTML aus einer EJS-Vorlage über JQuery injiziert werden?

Ich habe eine Index Datei, die eine Navbar und einen Inhaltsbereich sowie ein Beispiel TestButton Vorlage, die ich versuche zu rendern haben.

Index.ejs

<ul> 
    . 
    . 
    <li id="listItem"><a href="#test_page">Nav Bar Item</a></li> 
</ul> 

<div id="display"> 
</div> 

<script> 
    $('#listItem').click(function(){ 
     // Note - testButtonTemplate is being properly passed in from my routes 
     $('#display').html(<%- render(testButtonTemplate, {}) %>); 
    }); 
</script> 

TestButton.ejs:

<a href="#" class="btn btn-primary" id="test-button"> 
    Click Me! 
</a> 

Ich tat mein Bestes, meinen Code zu vereinfachen, aber im Grunde, wenn ich von der nav auf einen Link klicken bar, ich möchte eine Seite dynamisch in die display div laden.

---

Die Navigationsleiste funktioniert.
Die Klick-Funktion funktioniert.
Wenn ich manuell die EJS-Vorlage im Div anzeigen, funktioniert es.
EX:

<div id="display"> 
    <%- render(testButtonTemplate, {}) %> 
</div> 

---

Andernfalls, wenn ich versuche über die Seite mit dem Beispielcode zu laden, dies ist der Fehler, den ich bekommen:
"Uncaught Syntaxerror: unerwartete Token <" und das rohe html sieht so aus:

So können Sie sehen, dass die HTML richtig war aus der ejs Template-Klasse abgerufen, aber JQuery mag nicht, wie ich diese Daten formatiere. Es sieht so aus, als müssten die Daten in Anführungszeichen gesetzt werden, aber das einfache Hinzufügen von Anfangs- und Endzitaten löst das Problem nicht.

Ich habe scheinbar jede Kombination von Anführungszeichen versucht, Escape und Unescaped HTML, Speichern der Daten in einer Variablen zuerst dann versuchen, es zu injizieren, aber keine funktionieren für mich.

Gibt es einen offensichtlichen Fehler, den ich mache? Ich würde es vorziehen, das Problem zu lösen, wenn ich meinen aktuellen Werkzeugsatz verwende.

Answer 1

Versuchen Sie Ihre Vorlage wie folgt geladen:

<script> 
var template = new EJS({url: '/TestButton.ejs'}); 
$('#listItem').click(function(){ 
    $('#display').html(template.render()); 
}); 
</script>