node.js - 通过 ejs 将参数从 node.js 传递给 knockout.js

Question

我有一个使用 mongodb 数据和输出列表的 node.js，它使用 knockout.js

当我调用视图时，我使用传递一个 json 结构

res.render('list', { items:json });

在 list.ejs 模板页面中，我定义了一个隐藏元素：

<input type="hidden" id="hidden" value="<%= items %>">

在 .js 文件中，我读取了它的值：

var json=$("#hidden").val();
var tkts=jQuery.parseJSON(json);
var vm=new AppViewModel(tkts);

嗯......它运行但我认为（希望）必须有更好的方法......有没有办法避免隐藏的html var，例如？

Answer 1

目前我可以想到三种方法来做到这一点。

1.) 将数据分配给 JavaScript 代码中的变量：

<script type="text/javascript">solution1 = {"name": "solution1"}</script>

solution1

2.) 为您喜欢的元素添加数据属性：

<div id="solution2" data-value='{"name": "solution2"}'></div>

JSON.parse(document.getElementById('solution2').dataset.value)

3.) 使用 script 标签并选择不同于 text/javascript 或 application/javascript 的内容类型

<script id="solution3" type="script" type="text/json">{"name": "solution3"}</script>

JSON.parse(document.getElementById('solution3').innerHTML)

现场演示

http://jsfiddle.net/bikeshedder/sbjud/

个人笔记

这可能听起来很无聊，但第一个选项可能是最好的选择。它速度很快，需要尽可能少的代码并且可以正常工作。如果您可以立即将其作为 JavaScript 数据，我看不出您为什么希望首先将数据保存在字符串中的原因。

Answer 2

如果您提供一整页，您可以添加一个内联脚本......当然这会污染全局命名空间。

<script>
    var tkts = <%= items %>;
</script>

如果您使用 AJAX 获取此页面...然后将其分解为两个 AJAX 请求...其中一个获取模板，另一个可以获取项目列表（作为 JSON 请求）。它们可以并行运行，因此它甚至可能更快。