Jade模板，如何将具体对象传递给页面？答案

【问题标题】：Jade template, how to pass concrete object to pages?Jade模板，如何将具体对象传递给页面？
【发布时间】：2012-01-16 06:16:52
【问题描述】：

我的 node.js 项目有一个翡翠模板。我想将一个对象发送到翡翠模板并将其传递给页面内的函数（以呈现某些内容）。

我确信我会像这样从服务器发送正确的东西

res.render(__dirname + '/pages/viz.jade', {
    vizJson: newJson,
});

在客户端我做这样的事情：

script
    sunburst(#{vizJson})

因此，在脚本函数中，我想调用一个函数，该函数使用我在服务器端创建的一些 json 创建可视化。

问题是当渲染时我有类似sunburst([Object object]) 的东西。我还尝试发送 JSON 的字符串化版本，但是当我发送 JSON.parse(#{vizJson}) 时，它会像 Unexpected token & 一样抱怨。

我发送的 json 总是不同的，有不同的深度。

有人知道该怎么做吗？

谢谢

【问题讨论】：

标签： node.js pug

【解决方案1】：

为此，您需要在服务器上进行字符串化。

res.render(__dirname + '/pages/viz.jade', {
    vizJson: JSON.stringify(newJson),
});

然后，如您所述，在客户端解析 JSON。

script
    sunburst(JSON.parse(#{vizJson}))

希望有帮助！

【讨论】：

【解决方案2】：

我希望这会对某人有所帮助。我是这样解决的：

script
    sunburst(!{JSON.stringify(vizJson)})

注意 ! 和 {...} 包装 stringify 方法。

【讨论】：

我的 json 像这样返回："{\"some_key\":...}"。这可能是我如何获得原始 json 对象的结果，但对于这个示例，我将输出包装在页面内 JSON.parse("{\"some_key\":...}") 方法中。该对象在浏览器中似乎运行良好。
在执行此操作之前，请确保您的 json 对象不包含任何未转义的用户可控数据！ </script> 标签即使在 javascript 中的文字字符串中也会破坏 DOM，并允许任意 javascript 执行（参见 escape.alf.nu/2）
感谢@James 的留言。我猜，!{JSON.stringify(vizJson).replace(/</g, '&lt;').replace(/>/g, '&gt;');} 应该这样做吗？
其他人收到此错误Converting circular structure to JSON？

【解决方案3】：

奇怪的是，对我来说，解决方案不涉及调用JSON.parse。我在服务器上对我的对象进行了字符串化，只使用了!{vizJson} 方法并获得了我的对象客户端。

【讨论】：

【解决方案4】：

在JS端，你发回

res.render(__dirname + '/pages/viz.jade', {
    vizJson: JSON.stringify(newJson),
});

在 HTML 方面，我发现类似：

JSON.parse( '!{vizJson}' )

有效。

【讨论】：