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

问题描述

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

问题是:jade 渲染了这个片段

the problem is: jade renders this snippet

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 等没有被解析！有什么想法吗?

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

谢谢！

推荐答案

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