node.js JavaScript var 在 res.render() 的目标中可用



我正在尝试使一个变量(最终被从数据库中选择的更复杂的json所取代)可供客户端javascript访问。我想在页面呈现时加载它,而不是ajax调用,并且它不会通过像ejs这样的模板来呈现(我想将数据传递到用于combobox的extjs存储)。所以我有一个标准的回应:

function (req, res) {
  res.render('index.html', {foo: ['a','b']});
}

和一个空白的html页面,我想访问foo:

<!DOCTYPE html>
<html>
<head>
<script type=text/javascript>
console.log(foo);
</script>
</head>
<body>
</body>
</html>

有什么想法吗?我曾想过可能通过res.send()编写整个html页面(它比上面的例子多了一些东西),但这似乎是一个很明显的解决方法…

假设上面的问题中有相同的数组foo,这里有几种方法可以做到这一点。

这个使用EJS过滤器来编写一个数组文字:

<script type="text/javascript">
var foo = ['<%=: foo | join:"', '" %>'];
</script>

这个将其编码为JSON,稍后由客户端javascript:解析

<script type="text/javascript">
// note the "-" instead of "=" on the opening tag; it avoids escaping HTML entities
var fooJSON = '<%-JSON.stringify(foo)%>';
</script>

IIRC、ExtJS可以直接将JSON作为其数据进行处理。如果没有,那么您可以先使用它的JSON解析器,然后递给它一个局部变量。如果您没有使用ExtJS,您可以使用它在客户端上进行解析:https://github.com/douglascrockford/JSON-js

如果您选择将其编码为JSON,这将使以后更容易切换回AJAX来检索数据。在某些情况下,这将具有优势。页面可以加载并显示一些数据,同时在加载数据的元素上显示一个繁忙图标。

这并不是说在原始请求中包含所有数据本身就有什么问题。只是坚持使用JSON给了您以后选择的灵活性。

在EJS中,以下内容应能在中工作

<script type=text/javascript>
  console.log( <%= foo %>);
</script>

我确实建议不要动态生成JavaScript,因为它打破了关注点的分离,并迫使JavaScript打开

编辑:

事实证明,上面的方法对数组并不适用。因此,只需用语义HTML对数据进行编码。然后用JavaScript增强。如果JavaScript必须获取数据,那么将其存储在更明智的地方,比如cookie,或者通过ajax检索数据。

相关内容

最新更新