通过 javascript 访问车把变量答案

【问题标题】：Accessing handlebars variable via javascript通过 javascript 访问车把变量
【发布时间】：2015-08-26 09:20:41
【问题描述】：

我正在为 express js 框架生成一个把手视图，我需要从一个单独的 JavaScript 文件中访问我传递给视图的变量。

例如：

var foo = {{user.name}}

有人有想法吗？帮手？

【问题讨论】：

标签： javascript node.js express handlebars.js

【解决方案1】：

如果您想将<script> 包含在<script> 中，则需要将user.name 的值作为有效的JavaScript 表达式输出，这将作为代码重新评估它。

目前，例如，如果user.name 是"john.doe"，则生成的脚本将是：

var foo = john.doe; // `john` is treated as an object with a `doe` property

user.name 至少需要用引号引起来，以便将其理解为字符串值/文字。

var foo = "{{user.name}}";

// result
var foo = "john.doe";

您还可以利用 JSON 和 JavaScript 在语法上的相似性，输出 JavaScript 可以理解为表达式的 JSON，并且已经包含引号。

Handlebars.registerHelper('json', function (content) {
    return JSON.stringify(content);
});

var foo = {{{json user.name}}};

// result
var foo = "john.doe";

请注意最后一个示例中的三重 {{{...}}} 以禁用 HTML 编码，因此您不会得到：

var foo = &quot;john.doe&quot;

【讨论】：

感谢您的帮助！我在任何地方都没有看到这种方法： var foo = "{{user.name}}";这对我帮助很大:)
我有<script>var foo = {{{myJson}}}}</script>，其中 myJson 是一个相当大的对象，似乎车把无法解析它。只有当我尝试了我在回答中建议的解决方案时，我才能让它工作
这个也适用于我：var foo = "{{user.name}}";谢谢！
可以从 *.js 文件中获取值吗？或者我必须将值设置为元素属性data-my-value 并以这种方式获取？
这个解决方案不再起作用了吗？我在其他地方也见过它，但是每当我声明一个分配给 {{{helper value}}} 的变量时，我都会收到一个语法错误，第一个 { 作为意外标记。人们如何在客户端 javascript 中设置一个等于具有三方括号的值的变量？

【解决方案2】：

Node 可以像这样将编码的 JSON 传递给把手视图：

result.render('index', { 
  encodedJson : encodeURIComponent(JSON.stringify(jsonData))
});

handlebars-view 可以像这样解码和解析 json：

<script>
  var decodedJson = decodeURIComponent("{{{encodedJson}}}");
  var jsonObj = JSON.parse(decodedJson);
</script>

由于任何传递给车把视图的内容基本上都会直接注入 HTML，因此您应该始终传递编码的 json 并让视图对其进行解码。

我尝试了此线程中的其他建议。但是他们将未编码的 JSON 注入到车把视图中，这总是给我解析错误。我不知道人们是如何让它工作的，因为 Handlebars 似乎会将变量解析为纯文本。

我尚未了解 Handlebars 解析器的工作原理 - 但在我看来，唯一安全的选择是使用编码的 JSON，就像我在示例中所建议的那样。

【讨论】：

render 函数的编码将我的数据破坏为无法使用的[object][object] 字符串。所以我改为通过视图助手对其进行编码。此外，使用三方括号 {{{ 会导致我出现语法错误。双括号工作正常。总而言之，这个解决方案为我指明了正确的方向。
这对我有用，但仅当脚本标记直接位于 .hbs 文件中时才有效。如果我从另一个文件夹链接脚本文件，它不会接收到编码文本。您知道是否可以访问外部脚本文件中的编码文本？在中访问它

【解决方案3】：

我也不知道如何在单独的 js 文件中执行此操作。这些答案使我朝着正确的方向前进，所以谢谢！在通过渲染将数据传递到页面之前，我最终在服务器端对数据进行了 JSON 字符串化。但是，我仍然无法让代码在单独的 js 文件中工作——这很好。我的用例是 Materialise 输入表单自动完成。

node.js

// code is inside of a router.get block, therefore access to the response(res)

let customerData = {}
// add customer data with a loop, or whatever

const customers = JSON.stringify(customerData)

res.render('path/to/page', {
    customers
})

客户端js

// code placed within script tags of the handlebars file, not a separate js file

const customers = {{{customers}}}

【讨论】：

【解决方案4】：

var pageData = "{{pageData}}";
pageData = pageData.replace(/&quot;/g, `"`);
pageData = JSON.parse(pageData)

其中 pageData 是一个对象（可能包含其他对象）

【讨论】：