我正在尝试使用jade在nodejs中渲染html+js页面。我使用在线可用的 html 到jade 转换器将我的html 转换为jade，然后从我的nodejs 应用程序渲染它。但是，我无法正确渲染 Jade 。 我使用的示例是 google 在其 Google map API 文档中提供的示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker animations with google</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var berlin = new google.maps.LatLng(52.520816, 13.410186);
var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)
];
var markers = [];
var iterator = 0;
var map;
function initialize() {
var mapOptions = {
zoom: 12,
center: berlin
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
setTimeout(function() {
addMarker();
}, i * 200);
}
}
function addMarker() {
markers.push(new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
animation: google.maps.Animation.DROP
}));
iterator++;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel" style="margin-left: -52px">
<button id="drop" onclick="drop()">Drop Markers</button>
</div>
<div id="map-canvas"></div>
</body>
</html>
我尝试了很多转换器进行转换，但每个转换器都给了我一个或另一个错误。 http://html2jade.vida.io/能够将其转化为 Jade 。
我在 View 目录中将文件另存为maps_marker.jade，并从 web.js 中的 API 之一调用“res.render('maps_marker',{})”来渲染此页面。 然而，页面将以下 html 呈现为文本
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Marker animations with google</title><style><html>, body, #map-canvas {height: 100%;margin: 0px;padding: 0px}</html><div id="panel">{position: absolute;top: 5px;left: 50%;margin-left: -180px;z-index: 5;background-color: #fff;padding: 5px;border: 1px solid #999;}</div></style><script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script><script><var>berlin = new google.maps.LatLng(52.520816, 13.410186);</var><var>neighborhoods = [</var><new>google.maps.LatLng(52.511467, 13.447179),</new><new>google.maps.LatLng(52.549061, 13.422975),</new><new>google.maps.LatLng(52.497622, 13.396110),</new><new>google.maps.LatLng(52.517683, 13.394393)</new>];<var>markers = [];</var><var>iterator = 0;</var><var>map;</var><function>initialize() {</function><var>mapOptions = {zoom: 12,center: berlin};</var><map>= new google.maps.Map(document.getElementById('map-canvas'),mapOptions);}</map><function>drop() {for (var i = 0; i < neighborhoods.length; i++) {setTimeout(function() {addMarker();}, i * 200);}}</function><function>addMarker() {markers.push(new google.maps.Marker({position: neighborhoods[iterator],map: map,draggable: false,animation: google.maps.Animation.DROP}));iterator++;}</function><google window load initialize class="maps event addDomListener"></google></script></head><body><div id="panel" style="margin-left: -52px"><button id="drop" onclick="drop()">Drop Markers</button></div><div id="map-canvas"></div></body></html>
有人可以帮我理解如何在node.js中渲染这样的html+js吗？ 我目前正在尝试使用 jade 模板引擎，但也愿意使用任何其他模板引擎。
更新为添加来 self 的 web.js 的代码片段和来自的输入
我有一个index.html(在公共(public)文件夹中)，其中包含以下表单
<form id="searchForm" action="/submit_search" method="POST" enctype="multipart/form-data">
<input name="latitude" type="text" id="latitude"/>
<input name="longitude" type="text" id="longitude"/>
<input type="submit" value="Submit" onclick="submitForm()">
</form>
在我的 javascript 中 - 我提交了表单。 在我的 web.js 中，我有以下 Submit_search API 代码段
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.post('/submit_search', function(req,res){
console.log(JSON.stringify(req.body));
pg.connect(database_url, function(err, pgclient, done){
if(err)
{
console.log("Error in fetching pgclient from pool");
res.send(500, "Load the error connection page");
}
else if(pgclient != null)
{
console.log("Got an instance of pgclient");
generateDataForMap(req, res, pgclient, done);
}
});
});
然后我定义了我的generateDataForMap方法
var generateDataForMap = function(req, res, pgclient, done){
... some processing.....
..... create the required json.....
res.render('maps_marker',json);
}
我已将maps_marker.jade 文件放入views 文件夹中..
最佳答案
http://html2jade.vida.io/制作的 Jade 文件无效。要修复此问题，您需要在 style 和 script 标记后添加 .(点字符)，将它们转换为 style . 和 script. 分别。
doctype html
html
head
meta(charset="utf-8")
title Marker animations with google
style.
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
script(src="https://maps.googleapis.com/maps/api/js?v=3.exp")
script.
var berlin = new google.maps.LatLng(52.520816, 13.410186);
var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)
];
var markers = [];
var iterator = 0;
var map;
function initialize() {
var mapOptions = {
zoom: 12,
center: berlin
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
setTimeout(function() {
addMarker();
}, i * 200);
}
}
function addMarker() {
markers.push(new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
animation: google.maps.Animation.DROP
}));
iterator++;
}
google.maps.event.addDomListener(window, 'load', initialize);
body
#panel(style="margin-left: -52px")
button#drop(onclick="drop()") Drop Markers
#map-canvas
关于node.js - 使用jade在node.js中渲染html+js页面时，将html作为渲染的文本而不是html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24619073/