¿Cómo pasar la variable del archivo de plantilla de jade a un archivo de script?

Tengo problemas con una variable (config) declarada en un archivo de plantilla de jade (index.jade) que no se pasa a un archivo de javascript, lo que hace que mi javascript se bloquee. Aquí está el archivo (vistas / index.jade):

h1 #{title}

script(src='./socket.io/socket.io.js')
script(type='text/javascript')
  var config = {};
  config.address = '#{address}';
  config.port = '#{port}';
script(src='./javascripts/app.js')

Aquí hay una parte de mi app.js (lado del servidor):

  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.set('address', 'localhost');
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
  app.use(express.errorHandler());
});

// Routes

app.get('/', function(req, res){
  res.render('index', {
    address: app.settings.address,
    port: app.settings.port
});
});

if (!module.parent) {
  app.listen(app.settings.port);
  console.log("Server listening on port %d",
app.settings.port);
}

// Start my Socket.io app and pass in the socket
require('./socketapp').start(io.listen(app));

Y aquí hay una parte de mi archivo javascript que falla (public / javascripts / app.js):

(function() {
        var socket = new io.Socket(config.address, {port: config.port, rememberTransport: false});

Estoy ejecutando el sitio en modo de desarrollo (NODE_ENV = desarrollo) en localhost (mi propia máquina). Estoy usando el inspector de nodos para la depuración, lo que me dijo que la variable de configuración no está definida en public / javascripts / app.js.

¿¿Algunas ideas?? ¡¡Gracias!!

Es un poco tarde pero ...

script.
  loginName="#{login}";

Esto está funcionando bien en mi guión. En Express, estoy haciendo esto:

exports.index = function(req, res){
  res.render( 'index',  { layout:false, login: req.session.login } );
};

¿Supongo que el último jade es diferente?

Merc.

editar: agregado "." después de la secuencia de comandos para evitar la advertencia de Jade.

!{}es para la interpolación de código sin escape , que es más adecuado para objetos

script var data = !{JSON.stringify(data).replace(/<\//g, '<\\/')}

{ foo: 'bar' }
// becomes:
<script>var data = {"foo":"bar"}</script>

{ foo: 'bar</script><script>alert("xss")//' }
// becomes:
<script>var data = {"foo":"bar<\/script><script>alert(\"xss\")//"}</script>

La idea es evitar que el atacante:

1. Salir de la variable: JSON.stringifyescapa de las comillas
2. Salga de la etiqueta del script: si el contenido de la variable (que es posible que no pueda controlar si proviene de la base de datos, por ejemplo) tiene una </script>cadena, la declaración de reemplazo se encargará de ello

https://github.com/pugjs/pug/blob/355d3dae/examples/dynamicscript.pug

#{}es para la interpolación de cadenas de escape , que es adecuada solo si está trabajando con cadenas. No funciona con objetos

script var data = #{JSON.stringify(data)}

//=> <script>var data = {&quot;foo&quot;:&quot;bar&quot;}</script>

En mi caso, estaba intentando pasar un objeto a una plantilla a través de una ruta rápida (similar a la configuración de OP). Luego quise pasar ese objeto a una función que estaba llamando a través de una etiqueta de script en una plantilla pug. Aunque la respuesta de lagginreflex me acercó, terminé con lo siguiente:

script.
    var data = JSON.parse('!{JSON.stringify(routeObj)}');
    funcName(data)

Esto aseguró que el objeto se pasara como se esperaba, en lugar de necesitar deserializar en la función. Además, las otras respuestas parecían funcionar bien con primitivas, pero cuando se pasaban matrices, etc. junto con el objeto, se analizaban como valores de cadena.

Si eres como yo y usas mucho este método de pasar variables, aquí tienes una solución de código sin escritura.

En su ruta node.js, pase las variables en un objeto llamado window, así:

router.get('/', function (req, res, next) {
    res.render('index', {
        window: {
            instance: instance
        }
    });
});

Luego, en su archivo de diseño de pug / jade (justo antes del block content), los saca así:

if window
    each object, key in window
        script.
            window.!{key} = !{JSON.stringify(object)};

Como mi archivo layout.pug se carga con cada archivo pug, no necesito 'importar' mis variables una y otra vez.

De esta manera, todas las variables / objetos pasados ​​a window'mágicamente' terminan en el windowobjeto real de su navegador donde puede usarlos en Reactjs, Angular, ... o vainilla javascript.

Así es como abordé esto (usando un derivado MEAN)

Mis variables:

{
  NODE_ENV : development,
  ...
  ui_varables {
     var1: one,
     var2: two
  }
}

Primero tenía que asegurarme de que se pasaran las variables de configuración necesarias. MEAN usa el paquete node nconf y, de forma predeterminada, está configurado para limitar qué variables se pasan del entorno. Tuve que remediar eso:

config / config.js:

original:

nconf.argv()
  .env(['PORT', 'NODE_ENV', 'FORCE_DB_SYNC'] ) // Load only these environment variables
  .defaults({
  store: {
    NODE_ENV: 'development'
  }
});

después de modificaciones:

nconf.argv()
  .env('__') // Load ALL environment variables
  // double-underscore replaces : as a way to denote hierarchy
  .defaults({
  store: {
    NODE_ENV: 'development'
  }
});

Ahora puedo configurar mis variables así:

export ui_varables__var1=first-value
export ui_varables__var2=second-value

Nota: Restablecí el "indicador de jerarquía" a "__" (guión bajo doble) porque su valor predeterminado era ":", lo que hace que las variables sean más difíciles de configurar desde bash. Vea otra publicación en este hilo.

Ahora la parte de jade: a continuación, se deben representar los valores, para que JavaScript pueda recogerlos en el lado del cliente. Una forma sencilla de escribir estos valores en el archivo de índice. Debido a que esta es una aplicación de una página (angular), esta página siempre se carga primero. Creo que idealmente debería ser un archivo de inclusión javascript (solo para mantener las cosas limpias), pero esto es bueno para una demostración.

app / controllers / index.js:

'use strict';
var config = require('../../config/config');

exports.render = function(req, res) {
  res.render('index', {
    user: req.user ? JSON.stringify(req.user) : "null",
    //new lines follow:
    config_defaults : {
       ui_defaults: JSON.stringify(config.configwriter_ui).replace(/<\//g, '<\\/')  //NOTE: the replace is xss prevention
    }
  });
};

aplicación / vistas / index.jade:

extends layouts/default

block content
  section(ui-view)
    script(type="text/javascript").
    window.user = !{user};
    //new line here
    defaults = !{config_defaults.ui_defaults};

En mi html renderizado, esto me da un pequeño script agradable:

<script type="text/javascript">
 window.user = null;         
 defaults = {"var1":"first-value","var2:"second-value"};
</script>        

Desde este punto es fácil para angular utilizar el código.

Vea esta pregunta: JADE + EXPRESS: ¿Iterando sobre el objeto en el código JS en línea (lado del cliente)?

Estoy teniendo el mismo problema. Jade no pasa variables locales (ni hace ninguna plantilla) a los scripts de JavaScript, simplemente pasa todo el bloque como texto literal. Si usa las variables locales 'dirección' y 'puerto' en su archivo Jade encima de la etiqueta de script, deberían aparecer.

Las posibles soluciones se enumeran en la pregunta a la que me vinculé anteriormente, pero puede: - pasar cada línea como texto sin escape (! = Al comienzo de cada línea), y simplemente poner "-" antes de cada línea de javascript que use un variable local, o: - Pasar variables a través de un elemento dom y acceder a través de JQuery (feo)

¿No hay mejor manera? Parece que los creadores de Jade no quieren soporte de javascript multilínea, como se muestra en este hilo en GitHub: https://github.com/visionmedia/jade/pull/405