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

Question

我想实现一个基于其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;')

问题是：jade 呈现此代码片段

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

，因为它在 jade 模板源中... - if 等不会被解析！有什么想法吗？

谢谢！

Answer 1

整个脚本标签（其下缩进的所有内容）将通过原始数据传递，而无需进一步解析。 Jade 进行 HTML 模板化，而不是 HTML 模板化加上嵌套的 javascript 模板化。要将您的 pins 变量从玉本地模板变量数据传递到脚本源代码，您必须采取其他一些方法，例如使用原始玉来呈现一个只调用您的 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>"

Answer 2

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

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

通过 jQuery 访问：

    $("#variableName").val()

Joe

Answer 3

您可以使用这个：

script
  console.log(#{var_name});

Answer 4

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

Answer 5

服务器端

JSON.stringify(users)

客户端

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

Answer 6

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

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

答案最初来自 这篇文章