当使用jade在node.js中呈现html + js页面时，将html呈现为呈现的文本而不是html
我正在尝试使用jade在nodejs中呈现html + js页面。 我使用网上可用的HTML玉转换器将我的HTML转换成玉，然后从我的nodejs应用程序呈现它。 但是，我无法正确渲染玉石。 我使用的例子是由谷歌地图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/能够将其转换成玉石。
我在我的视图目录中保存了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。 我目前正在尝试使用玉石模板引擎，但也可以使用其他模板引擎。
已经过去添加从我的web.js片段和input
我有一个index.html（在公共文件夹中）与其中的以下forms
<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文件放在视图文件夹中。
http://html2jade.vida.io/生成的玉文件无效。 要修复它，你需要添加一个. （点字符）后的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