我有一个用express编写的node.js服务器,并在某个时刻将一个数组发送到某个.jade页面。问题在于,渲染Jade页面时,Jade编译器将数组呈现为[object Object],而Chrome上的JavaScript编译器则抱怨说“意外标识符”。
[object Object]
这是Jade代码:
!!! 5 html(lang="en") head title= "Rankings" body h1 Ranking div(id="rankings") script(type='text/javascript') function fillRanking(){ var rankArray = #{ranking}; alert("inside fillranking"); var divElement = document.getElementById("rankings"); for(var i = 0; i< rankArray.length; i++){ divElements.innerHTML += "" + i+1 + ". " + rankArray[i].Username + " " + rankArray[i].Points; } } fillRanking();
如您所见,这确实很简单,我只是#{ranking}将由node.js传递给Jade 的变量内所给的信息填充到div中。第二行的警报不会触发,因为一旦我尝试分配#{ranking}变量,就会发生“意外标识符”错误。
#{ranking}
以下是我的node.js中带有express的代码
app.get('/ranking', function (req, res) { //get the first ten people in the ranking var firstTen = getRanking(10, function(results){ //compute the array of results var result = { ranking: [], } for(var i = 0; i < results.length; i++){ result.ranking[i] = results[i]; } //render the ranking with all the info console.log(result); res.render(__dirname + '/pages/ranking/ranking.jade', { ranking: result, }); }); });
我在结果数组中创建了一个对象,将在查询中找到的结果放入其中,并将其传递给呈现引擎。该console.log(results)调用可以result正确打印对象,例如:
console.log(results)
result
{ ranking: [ { Username: 'usr1', _id: 4ed27319c1d767f70e000002, Points: 100 }, { Username: 'usr2', _id: 4ed27326c1d767f70e000003, Points: 100 } ] }
我真的不知道如何处理传递给Jade页面的变量。无论我做什么,都会不断收到“意外标识符”错误。你们当中有人知道我该如何解决吗?
谢谢
查看上面的评论并进行更多调查,以下是我发现的工作:
在您的javascript(/控制器)上使用它:
... res.render(__dirname + '/pages/ranking/ranking.jade', { ranking: JSON.stringify(ranking), }) ...
在玉模板上:
... function fillRanking(){ var rankArray = !{ranking}; alert("inside fillranking"); ...
之所以有效,是因为!{}不会执行转义。