JADE + 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等不会被解析！有什么想法吗？

谢谢！

- trnc

Answer 1

整个脚本标签（缩进在其下的所有内容）将被原样传递而不进行进一步解析。Jade提供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>"

- Peter Lyons

Answer 2

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

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

通过jQuery访问：

    $("#variableName").val()

乔

- Joe

Answer 3

你可以使用这个：

script
  console.log(#{var_name});

- user1082679

---

但是你不能使用 var ok = #{someObjectOrNull} ? true : false。此外，ok 将会是未定义的。相反，请使用 Peter Lyons 的方法 != "var ok = " + (user ? "true" : "false") + ";"。 - fider

Answer 4

- tjholowaychuk

---

+1 Express-expose可能是你想要的。有一件事我不明白：如果我想在将网页发送到客户端之前使用jQuery来执行一些动态JS操作，这需要从node.js发送本地变量，那么正确的方法是什么？ - Varun Singh

使用类似于express-expose的工具，你在将内容发送给客户端之前就可以对其进行操作，否则你无法在没有标记和js的情况下操作客户端。 - tjholowaychuk

Answer 5

服务器端

JSON.stringify(users)

客户端

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

- Cherif

Answer 6

我曾经遇到过类似的问题，这行代码解决了它：

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

答案最初来自这篇帖子

- Erjim