Gemeinsame Nutzung von Layout-Informationen zwischen Jade und Javascript

Question

Ich habe eine Node.js/Jade-basierte Website und ich versuche, einige Interaktivität mit einigen einfachen Bits von Javascript hinzufügen.

Insbesondere versuche ich, eine Schaltfläche einzurichten, die eine neue Zeile zu einer Tabelle hinzufügt. Die Tabelle Rendering ist derzeit in Jade getan, und ich plane auf mit JQuery, um den Callback zum Hinzufügen der Zeile einrichten.

Meine Vorlage sieht ungefähr so aus:

tbody#my_body
  - each foo in foos
    tr
      td= foo.blah
      td= foo.hello
      td
        a( ... complex link stuff etc. )

Und ich denke, meine JS Rückruf wird sein

$("a#add_row").click(function(){
  $("#my_body").append( ??? );
});

Ich könnte den ganzen Layout-Kram in HTML umschreiben in der append Körper, aber das scheint dumm. Jedes Mal, wenn ich das eine ändere, muss ich auch das andere ändern.

Gibt es eine Möglichkeit, den Layout-Code zwischen der Jade-Vorlage und dem Javascript zu teilen?

Answer 1

Ich meine, Sie haben Zugriff auf die serverseitigen Variablen, wenn Sie die Ansicht schreiben. Sie könnten auch einen Dump Ihrer Modelle/Variablen zu json tun und verwenden Sie das. Schließlich könnten Sie sich Backbone.js ansehen und die gleichen Modelle auf dem Client/Server wiederverwenden. Siehe diese Stelle .

Answer 2

Also... ich glaube, ich verstehe nicht ganz, was Sie fragen. Möchten Sie, dass die Tabelle zwischen den Sitzungen statisch ist oder nur im Kontext einer einzelnen Sitzung oder Aktualisierung?

Im letzteren Fall fügen Sie die Tabellenzeile einfach über Jquery ein, wie Sie es bei einer Website tun würden, die vollständig aus HTML besteht. Zu dem Zeitpunkt, an dem Sie die Jquery-Funktion aufrufen, hat Express die Jade-Vorlagen bereits in vollständiges HTML umgewandelt.

Wenn Sie wollen, dass diese Zeile zu persistieren, dann müssen Sie einen Aufruf an den Server, dass die Daten der neuen Zeile, um Ihre Daten-Sammlung für foo fügt, dann, wenn die Seite wieder gerendert wird der Server wird foo zurück mit allen vorherigen Zeilen + die eine, die Sie gerade hinzugefügt übergeben enthalten.