Zugriff auf lokale Express.js-Variablen in clientseitigem JavaScript

Neugierig, 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 muss auch Zugriff auf diese Daten in einer clientseitigen JavaScript-Datei haben.

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 kann ich in home.jade Dinge tun wie:

p Hello #{data.name}!

Welches schreibt aus:

Hello stephen!

Jetzt möchte ich auch Zugriff auf dieses Datenobjekt in einer clientseitigen JS-Datei haben, damit ich das Objekt mit einem Klick bearbeiten kann, bevor ich es auf den Server zurückschicke, um die Datenbank zu aktualisieren.

Dies konnte ich erreichen, indem ich das "Daten" -Objekt in einem versteckten Eingabefeld in der Jade-Vorlage speicherte und dann den Wert dieses Felds in meiner clientseitigen JS-Datei abrief.

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 tatsächliche Objekt haben, das von Express in meinem clientseitigen JS zurückkommt.

Ist meine Lösung optimal, wie würden Sie dies erreichen?

Wenn das Rendern abgeschlossen ist, wird nur das gerenderte HTML an den Client gesendet. Daher sind keine Variablen mehr verfügbar. Was Sie tun können, 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)}

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

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 folgendermaßen:

var placeUrls = !{place_urls};

In diesem Beispiel wird es für das Twitter Bootstrap Typeahead Plugin verwendet. Sie können dann so etwas verwenden, um es zu analysieren, wenn Sie Folgendes benötigen:

jQuery.parseJSON( placeUrls );

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

Verwenden von Jade-Vorlagen:

Wenn Sie ein @ Amberlamps-Codeausschnitt über einer enthaltenen statischen HTML-Datei einfügen, denken Sie daran, dies anzugeben !!! 5 oben, um zu vermeiden, dass Ihr Styling beschädigt wird , in views / index.jade :

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

include ../www/index.html

Dies wird in Ihrer local_data-Variablen übergeben, bevor die eigentliche statische HTML-Seite geladen wird, sodass die Variable von Anfang an global verfügbar ist.

Serverside (mit Jade Templating Engine) - server.js :

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

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

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

Sie müssen die lokalen Variablen beim Rendern nicht übergeben, lokale Variablen sind global. Geben Sie in Ihren Mops-Dateiaufruf keinen Schlüsselausdruck ein, z #{}. Verwenden Sie einfach etwas wie: base(href=base.url)

wo base.urlistapp.locals.base = { url:'/' };

Hast du schon von socket.io gehört? (http://socket.io/). Eine einfache Möglichkeit, über 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 bearbeitet werden. Der Code müsste nicht viel sein, einfach ein socket.emit()from node.js und ein socket.on()from the client. Ich denke, das wäre eine effektive Lösung!