JADE+EXPRESS:在内联JS代码中对对象进行迭代(客户端）

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

本文关键字：对象 迭代 客户端 代码 JS JADE+EXPRESS      更新时间：2023-09-26

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

问题是：玉渲染这个片段

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

谢谢！

整个脚本标记（其下缩进的所有内容）将通过raw传递，而无需进一步解析。Jade做HTML模板，而不是HTML模板加上嵌套的javascript模板。要将您的pins变量从jade本地模板变量数据传递到脚本源代码，您必须执行其他方法，例如使用原始jade来呈现一个小脚本标记，该标记仅使用pins数据作为文字来调用您的initialize函数，或者将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>"

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

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

通过jQuery:访问

    $("#variableName").val()

Joe

您可以使用这个：

script
  console.log(#{var_name});

脚本标签是纯文本的，你不能轻易地混合Jade来生成这个javascript，这通常反映了糟糕的设计。您可以将客户端上需要的东西序列化为JSON，或者使用express exposure来完成

服务器端

JSON.stringify(users)

客户端

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

我遇到了类似的问题，这行代码解决了这个问题：

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

答案最初来自这篇文章

相关文章：