我想实现一个基于其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(/"/g,'"'));
我遇到了类似的问题,这行代码解决了这个问题:
var myvar = !{JSON.stringify(mydata)};
答案最初来自这篇文章