Zugriff auf lokale Express.js-Variablen in clientseitigem JavaScript

Lesezeit: 5 Minuten

Zugriff auf lokale Expressjs Variablen in clientseitigem JavaScript
braitsch

Bin gespannt, ob ich das richtig mache und wenn nicht, wie ihr das angehen würdet.

Ich habe eine Jade-Vorlage, die einige Daten rendern muss, die aus einer MongoDB-Datenbank abgerufen wurden, und ich brauche auch Zugriff auf diese Daten in einer clientseitigen JavaScript-Datei.

Ich verwende Express.js und sende die Daten wie folgt an die Jade-Vorlage:

var myMongoDbObject = {name : 'stephen'};
res.render('home', { locals: { data : myMongoDbObject } });

Dann drinnen home.jade Ich kann Dinge tun wie:

p Hello #{data.name}!

Welche schreibt aus:

Hello stephen!

Jetzt möchte ich auch Zugriff auf dieses Datenobjekt in einer clientseitigen JS-Datei haben, damit ich das Objekt beispielsweise auf Knopfdruck manipulieren kann, bevor ich es zurück an den Server schicke, um die Datenbank zu aktualisieren.

Ich konnte dies erreichen, indem ich das “Daten” -Objekt in einem versteckten Eingabefeld in der Jade-Vorlage gespeichert und dann den Wert dieses Felds in meine clientseitige JS-Datei geholt habe.

In home.jade

- local_data = JSON.stringify(data) // data coming in from Express.js
input(type="hidden", value=local_data)#myLocalDataObj

Dann kann ich in meiner clientseitigen JS-Datei wie folgt auf local_data zugreifen:

In myLocalFile.js

var localObj = JSON.parse($("#myLocalDataObj").val());
console.log(localObj.name);

Dieses Stringify/Parsing-Geschäft fühlt sich jedoch chaotisch an. Ich weiß, dass ich die Werte meines Datenobjekts an DOM-Objekte in meiner Jade-Vorlage binden und diese Werte dann mit jQuery abrufen kann, aber ich möchte Zugriff auf das eigentliche Objekt haben, das von Express in meinem clientseitigen JS zurückkommt.

Ist meine Lösung optimal, wie würdet ihr das erreichen?

  • Ich habe vor ein paar Monaten tatsächlich ein npm-Paket erstellt, um genau dieses Problem zu lösen: github.com/brooklynDev/JShare

    – BKostenlos

    7. September ’12 um 1:35

1642073464 368 Zugriff auf lokale Expressjs Variablen in clientseitigem JavaScript
Bernsteinlampen

Wenn das Rendern abgeschlossen ist, wird nur der gerenderte HTML-Code an den Client gesendet. Daher werden keine Variablen mehr verfügbar sein. Was Sie tun könnten, ist, anstatt das Objekt in das Eingabeelement zu schreiben, das Objekt als gerendertes JavaScript auszugeben:

script(type="text/javascript").
    var local_data =!{JSON.stringify(data)}

BEARBEITEN: Anscheinend benötigt Jade einen Punkt nach der ersten schließenden Klammer.

  • Ich sehe “Daten” immer noch als undefiniert im Skript-Tag.

    – braitsch

    6. Juni ’12 um 22:01

  • Ok, das ist besser als meine Eingabefeldlösung, da es nicht erforderlich ist, den JSON-String zurück in ein Objekt zu parsen oder den Wert des Eingabefelds mit jQuery nachzuschlagen.

    – braitsch

    13. Juni ’12 um 19:34

  • Das funktioniert bei mir nicht, ich verstehe [object Object]. Kann ich serverseitig mit Stringify oder Parse etwas falsch machen?

    – Costa Michailidis

    30. März ’13 um 0:32

  • @Costa Abhängig von Ihrer Ansichts-Engine können Sie JSON.stringify möglicherweise nicht aus der Ansicht aufrufen. Stattdessen sollten Sie es in Ihrem Controller stringifizieren und den String als Variable übergeben wie {{{jsonData}}} (bei Lenker).

    – Tom

    16. Sep. ’13 um 10:38

  • Lösungsvorschlag funktioniert, empfehle ich auch Express-Exposé für eine sauberere und integriertere Möglichkeit, serverseitige Variablen verfügbar zu machen.

    – xmikex83

    3. November ’13 um 20:12

Zugriff auf lokale Expressjs Variablen in clientseitigem JavaScript
Jabberaffe

Ich mache es ein bisschen anders. In meinem Controller mache ich das:

res.render('search-directory', {
  title: 'My Title',
  place_urls: JSON.stringify(placeUrls),
});

Und dann verwende ich es im Javascript in meiner Jade-Datei so:

var placeUrls = !{place_urls};

In diesem Beispiel wird es für das Twitter-Bootstrap-Typeahead-Plugin verwendet. Sie können es dann verwenden, um es bei Bedarf zu parsen:

jQuery.parseJSON( placeUrls );

Beachten Sie auch, dass Sie die Einheimischen weglassen können: {} .

  • +1 auf den Hinweis, die Einheimischen auszulassen, ich wusste nicht, dass Sie das tun können.

    – braitsch

    13. Juni ’12 um 19:35

  • Was bedeutet es lass die Einheimischen weg? @braitsch

    – Mathakoot

    14. August ’16 um 13:37

  • @iamrudra Es ist nicht erforderlich, dem locals-Objekt in der Render-Funktion das Wort “locals” voranzustellen. res.render('home', { { data : myObject } }) ist in Ordnung vs res.render('home', { locals : { data : myObject } }) Obwohl ich dir aus Gründen der Übersichtlichkeit vorschlagen könnte, es trotzdem zu tun.

    – braitsch

    15. August ’16 um 20:07


  • @braitsch: das ist mir neu. Ich habe in der Schule Node- und Express-Projekte gemacht, aber noch nie habe ich das Locals-Objekt verwendet. Könnten Sie mich bitte auf die richtigen Dokumente/Lesematerialien hinweisen?

    – Mathakoot

    15. August ’16 um 20:22 Uhr

1642073464 295 Zugriff auf lokale Expressjs Variablen in clientseitigem JavaScript
AmpT

Verwenden von Jade-Templating:

Wenn Sie @Amberlamps Code-Snippet über einer enthaltenen statischen HTML-Datei einfügen, denken Sie daran, anzugeben !!! 5 oben, um zu vermeiden, dass Ihr Styling kaputt geht, in Aufrufe/index.jade:

!!! 5
script(type="text/javascript")
    var local_data =!{JSON.stringify(data)}

include ../www/index.html

Dadurch wird Ihre local_data-Variable übergeben, bevor die eigentliche statische HTML-Seite geladen wird, sodass die Variable von Anfang an global verfügbar ist.

Serverseitig (mit Jade-Templating-Engine) – server.js:

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');

app.get("https://stackoverflow.com/", ensureAuthenticated, function(request, response){
    response.render('index', { data: {currentUser: request.user.id} });
});

app.use(express.static(__dirname + '/www'));

Sie müssen die Locals-Variablen im Render-Aufruf nicht übergeben, Locals-Variablen sind Globals. Geben Sie bei Ihrem Mops-Dateiaufruf keine Schlüsselausdrücke ein, z #{}. Verwenden Sie einfach so etwas wie:
base(href=base.url)

wo base.url ist app.locals.base = { url:"https://stackoverflow.com/" };

Schon mal was von socket.io gehört? (http://socket.io/). Eine einfache Möglichkeit, von Express auf das Objekt zuzugreifen, besteht darin, einen Socket zwischen node.js und Ihrem Javascript zu öffnen. Auf diese Weise können Daten einfach an die Client-Seite übergeben und dann einfach mit Javascript manipuliert werden. Der Code müsste nicht viel sein, einfach a socket.emit() von node.js und a socket.on() vom Auftraggeber. Ich denke, das wäre eine effektive Lösung!

  • Dies ist mit einem Hammer, um eine Biene zu schlagen. Es fügt viele Anfragen für fast nichts hinzu.

    – Arnaud Rinquin

    8. Juni ’12 um 11:40

  • Genau, Socket.io ist in diesem Fall übertrieben. Ich suche nach dem einfachsten Weg, um JS-Variablen vom Server zu einem clientseitigen Skript zu transportieren.

    – braitsch

    13. Juni ’12 um 19:16

  • LOL, ich mag irgendwie, was Alex vorschlägt, bam! ah all diese nervigen Einheimischen, bam bam!

    – Benutzer1323136

    7. Mai ’13 um 4:45

  • Dies ist mit einem Hammer, um eine Biene zu schlagen. Es fügt viele Anfragen für fast nichts hinzu.

    – Arnaud Rinquin

    8. Juni ’12 um 11:40

  • Genau, Socket.io ist in diesem Fall übertrieben. Ich suche nach dem einfachsten Weg, um JS-Variablen vom Server zu einem clientseitigen Skript zu transportieren.

    – braitsch

    13. Juni ’12 um 19:16

  • LOL, ich mag irgendwie, was Alex vorschlägt, bam! ah all diese nervigen Einheimischen, bam bam!

    – Benutzer1323136

    7. Mai ’13 um 4:45

.

485590cookie-checkZugriff auf lokale Express.js-Variablen in clientseitigem JavaScript

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy