JADE + EXPRESS: ¿Está iterando sobre un objeto en código JS en línea (del lado del cliente)?

Question

Quiero implementar un mapa de Google basado en su api. Quiero agregar una ruta basada en las coordenadas. por lo tanto, obtengo mis coordenadas de mi modelo y quiero iterar sobre el objeto para filtrar el mapa con estos puntos. en mi plantilla de jade incluyo el código API JS así:

script(type='text/javascript') 
    function initialize() { 
     var myLatLng = new google.maps.LatLng(0, -180); 
     var myOptions = { 
     zoom: 3, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
     }; 

     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     var flightPlanCoordinates = [ 

     - if (typeof(pins) != null) 
      - var.pins.forEach(function(pin) { 
       new google.maps.LatLng(pin.latitude, pin.longitude), 
      - }) 
      new google.maps.LatLng(0,0) 
     ]; 
     var flightPath = new google.maps.Polyline({ 
     path: flightPlanCoordinates, 
     strokeColor: "#FF0000", 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
     }); 

     flightPath.setMap(map); 
    } 

div#map_canvas(style='height: 500px; background-color: #990000;') 

el problema es: jade hace que este fragmento

var flightPlanCoordinates = [ 

     - if (typeof(pins) != null) 
      - var.pins.forEach(function(pin) { 
       new google.maps.LatLng(pin.latitude, pin.longitude), 
      - }) 
      new google.maps.LatLng(0,0) 
     ]; 

como lo es en la fuente de la plantilla de jade ... el - Si etc. ¡no se analiza! ¿algunas ideas?

gracias!

Answer 1

La etiqueta de secuencia de comandos completa (todo sangrado debajo de ella) se pasará sin procesar sin más análisis. Jade hace plantillas HTML no plantillas HTML más plantillas javascript anidadas. Para pasar su variable pins de los datos variables de la plantilla local de jade al código fuente del script, tendrá que hacer otro enfoque como usar jade en bruto para representar una pequeña etiqueta de script que simplemente llama a su initialize función con los datos pins como un literal, o pegue sus datos de pins en alguna parte del dom y luego léalos desde allí. Algo a lo largo de estas líneas por debajo de su etiqueta de script (pseudocódigo, no han probado)

- if (typeof(pins) != null) 
    != "<script type='text/javascript'>" 
    != "var pins = [];" 
    - forEach pin in pins 
    != "pins.push(new Pin(" + pin.latitude + ", " + pin.longitude + "));" 
    != "initialize(pins);" 
    != "</script>" 

Answer 2

pasé el valor como un elemento de entrada oculta, por ejemplo:

input(type='hidden', id='variableName', value='#{variableName}') 

accede a través de jQuery:

$("#variableName").val() 

Joe

Answer 3

las etiquetas de secuencia de comandos son puramente texto, no se puede mezclar fácilmente el Jade para generar este j avascript, generalmente es un reflejo de un diseño pobre. Usted sólo puede serializar cosas como JSON que usted necesita en el cliente o utilizar expresar a exponer a hacer esto

Answer 4

Se puede utilizar esta:

script 
    console.log(#{var_name}); 

Answer 5

lado del servidor

JSON.stringify(users) 

lado del cliente

var users=JSON.parse(("#{users}").replace(/"/g,'"')); 

Answer 6

Tuve un problema similar y esta línea de código resuelve d es:

var myvar = !{JSON.stringify(mydata)}; 

La respuesta vino originalmente de this post