11

我想基于它的 api 实现一个谷歌地图。我想添加一个基于坐标的路径。因此我从我的模型中获取我的坐标，并希望遍历对象以用这些点填充地图。在我的玉模板中，我包含这样的 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;')

问题是：玉呈现这个片段

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

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

谢谢！

4

6 回答 6

16

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

- 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>"
于 2011-06-08T05:11:42.543 回答
5

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

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

通过 jQuery 访问：

    $("#variableName").val()

乔

于 2011-08-08T17:11:44.603 回答
3

你可以使用这个： 

script
  console.log(#{var_name});
于 2012-04-19T16:42:08.270 回答
2

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

于 2012-01-03T18:42:50.727 回答
1

服务器端

JSON.stringify(users)

客户端

var users=JSON.parse(("#{users}").replace(/&quot;/g,'"'));
于 2014-06-10T12:13:05.517 回答
0

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

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

答案最初来自这个帖子

于 2016-11-23T05:23:15.627 回答