javascript JADE + EXPRESS：在内联 JS 代码（客户端）中迭代对象？

JADE + EXPRESS: Iterating over object in inline JS code (client-side)?

提问by trnc

i want to implement a google map based on its api. i want to add a path based on coordinates to it. therefore i get my coordinates from my model and want to iterate over the object to fille the map with this points. in my jade template i include the api js code like this:

我想基于它的 api 实现一个谷歌地图。我想添加一个基于坐标的路径。因此，我从模型中获取坐标，并希望遍历对象以使用这些点填充地图。在我的 jade 模板中，我包含了这样的 api js 代码：

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;')

the problem is: jade renders this snippet

问题是：玉呈现这个片段

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)
      ];

as it is in the jade template source... the - if etc. doesn't get parsed! any ideas?

因为它在 jade 模板源代码中...... - if 等没有被解析！有任何想法吗？

thanks!

谢谢！

回答by Peter Lyons

The entire script tag (everything indented under it) is going to be passed through raw without further parsing. Jade does HTML templating not HTML templating plus nested javascript templating. To pass your pinsvariable from jade local template variable data to script source code, you'll have to do some other approach like using raw jade to render a tiny script tag that just calls your initializefunction with the pinsdata as a literal, or stick your pinsdata into the dom somewhere and then read it from there. Something along these lines below your script tag (pseudocode, haven't tested)

整个脚本标签（在它下面缩进的所有内容）将通过 raw 传递，而无需进一步解析。Jade 做 HTML 模板而不是 HTML 模板加上嵌套的 javascript 模板。要将您的pins变量从 jade 本地模板变量数据传递到脚本源代码，您必须执行一些其他方法，例如使用原始 jade 来呈现一个小脚本标签，该标签仅initialize使用pins数据作为文字调用您的函数，或者粘贴您的pins数据进入某个地方的 dom，然后从那里读取它。脚本标签下方的这些内容（伪代码，尚未测试）

- 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>"

回答by Joe

I passed the value as a hidden input element, e.g.:

我将值作为隐藏的输入元素传递，例如：

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

Accessed via jQuery:

通过 jQuery 访问：

    $("#variableName").val()

Joe

乔

回答by Joe

You can use this:

你可以使用这个：

script
  console.log(#{var_name});

回答by tjholowaychuk

the script tags are purely text, you can't easily mix the Jade to generate this javascript, it's usually a reflection of poor design. You can just serialize things as JSON that you need on the client or use express-expose to do this

脚本标签是纯文本，你不能轻易混合 Jade 来生成这个 javascript，这通常是糟糕设计的反映。您可以将客户端上需要的内容序列化为 JSON 或使用 express-expose 来执行此操作

回答by Cherif

server side

服务器端

JSON.stringify(users)

client side

客户端

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

回答by Erjim

I had a similar issue and this line of code solved it:

我有一个类似的问题，这行代码解决了它：

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

The answer came originally from this post

答案最初来自这篇文章