JADE + EXPRESS：迭代内联JS代码（客户端）中的对象？ [英] JADE + EXPRESS: Iterating over object in inline JS code (client-side)?

问题描述

我想根据其api实现一个谷歌地图。我想添加一个基于坐标的路径。因此，我从我的模型中得到我的坐标，并希望通过这个点遍历对象来填充地图。在我的玉模板中，我包含这样的api js代码：

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:

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

因为它是在玉模板源... - 如果等没有得到解析！任何想法？

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

谢谢！

推荐答案

整个脚本标签所有缩进的内容）将通过原始文件传递，无需进一步解析。 Jade做HTML模板不是HTML模板加上嵌套的JavaScript模板。要将您的引脚变量从jade本地模板变量数据转换为脚本源代码，则必须执行其他一些方法，例如使用raw jade渲染一个很小的脚本标签调用您的初始化函数，将引脚数据作为文字，或粘贴您的引脚数据到dom，然后从那里读取。在脚本标记下方的某些东西（伪代码，没有测试）

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 pins variable 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 initialize function with the pins data as a literal, or stick your pins data into the dom somewhere and then read it from there. Something along these lines below your script tag (pseudocode, haven't tested)

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

这篇关于JADE + EXPRESS：迭代内联JS代码（客户端）中的对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！