javascript - principiantes - node js examples

Acceso a las variables locales de Express.js en JavaScript del lado del cliente

Question

Curioso si estoy haciendo esto bien y si no, cómo ustedes se acercarían a esto.

Tengo una plantilla de Jade que necesita procesar algunos datos recuperados de una base de datos MongoDB y también necesito tener acceso a esos datos dentro de un archivo JavaScript del lado del cliente.

Estoy usando Express.js y envío los datos a la plantilla de Jade de la siguiente manera:

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

Luego dentro de home.jade puedo hacer cosas como:

p Hello #{data.name}!

Que escribe:

Hello stephen!

Ahora lo que quiero es tener también acceso a este objeto de datos dentro de un archivo JS del lado del cliente para poder manipular el objeto, por ejemplo, hacer clic en un botón antes de volver a enviarlo al servidor para actualizar la base de datos.

Pude lograr esto guardando el objeto "datos" dentro de un campo de entrada oculto en la plantilla de Jade y luego obteniendo el valor de ese campo dentro de mi archivo JS del lado del cliente.

Dentro de home.jade

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

Luego, en mi archivo JS del lado del cliente, puedo acceder a local_data de la siguiente manera:

Dentro de myLocalFile.js

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

Sin embargo, este negocio de secuenciar / analizar se siente desordenado. Sé que puedo vincular los valores de mi objeto de datos a objetos DOM en mi plantilla de Jade y luego obtener esos valores usando jQuery, pero me gustaría tener acceso al Objeto real que regresa de Express en mi lado del cliente JS.

¿Mi solución es óptima? ¿Cómo lograrán esto?

Answer 1

¿Has oído hablar de socket.io? (http://socket.io/). Una forma fácil de acceder al objeto desde Express sería abrir un socket entre node.js y su javascript. De esta forma, los datos pueden pasarse fácilmente al lado del cliente y luego manipularse fácilmente mediante javascript. El código no debería ser demasiado, simplemente un socket.emit() de node.js y un socket.on() del cliente. ¡Creo que sería una solución efectiva!

Answer 2

Cuando finaliza la renderización, solo el HTML renderizado se envía al cliente. Por lo tanto, no habrá más variables disponibles. Lo que podría hacer es, en lugar de escribir el objeto en el elemento de entrada, generar el objeto como JavaScript renderizado:

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

EDITAR: Aparentemente Jade requiere un punto después del primer paréntesis de cierre.

Answer 3

Lo hago un poco diferente. En mi controlador hago esto:

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

Y luego en el javascript en mi archivo jade lo uso así:

var placeUrls = !{place_urls};

En este ejemplo, se usa para el complemento de escritura automática twitter bootstrap. Luego puede usar algo como esto para analizarlo si necesita:

jQuery.parseJSON( placeUrls );

Tenga en cuenta también que puede dejar fuera a los lugareños: {}.

Answer 4

No necesita pasar las variables locales en la llamada de renderizado, las variables locales son globales. En su llamada de archivo pug no ponga la expresión de teclas, por ejemplo, #{} . Solo use algo como: base(href=base.url)

donde base.url es app.locals.base = { url:''/'' };

Answer 5

Usando plantillas de Jade:

Si está insertando @Amberlamps un fragmento de código encima de un archivo HTML estático incluido, recuerde especificarlo. 5 en la parte superior, para evitar que se rompa el estilo, en views / index.jade :

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

include ../www/index.html

Esto pasará su variable local_data antes de que se cargue la página HTML estática real, de modo que la variable esté disponible globalmente desde el comienzo.

Serverside (usando el motor de plantillas de Jade) - 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''));