微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

JADE + EXPRESS:迭代内联JS代码中的对象客户端?

如何解决JADE + EXPRESS:迭代内联JS代码中的对象客户端?

整个脚本标签(在其下缩进的所有内容)将通过原始文件传递,而无需进一步解析。Jade不会HTML模板而不是HTML模板加上嵌套的javascript模板。要将pins变量从jade本地模板变量数据传递到脚本源代码,您必须执行其他方法,例如使用原始jade渲染一个小的脚本标签,该脚本标签initializepins数据作为文字调用函数,或者粘贴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>"

解决方法

我想基于其api实现Google地图。我想添加一个基于坐标的路径。因此,我从模型中获取了坐标,并希望在对象上进行迭代以用此点填充地图。在我的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,0)
      ];

就像在jade模板源中一样…-如果不被解析!有任何想法吗?

谢谢!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。