如何将JavaScript变量插入Bigcommerce Handlebars并正确取值

问题原因 #

你遇到的报错和不符合预期的输出，核心是混淆了Bigcommerce Handlebars辅助方法和前端JavaScript的执行时机与上下文：

• assignVar、getVar是服务端渲染阶段运行的Handlebars内置方法，执行完成后才会把渲染好的页面内容发送到浏览器
• 你在<script>标签中定义的exampleVar是客户端JavaScript变量，只有页面发送到浏览器后才会被解析执行，服务端渲染阶段根本不存在这个变量，因此直接传入assignVar会抛出非字符串错误
• 你第二次写的{{ assignVar "exampleVar" "exampleVar"}}相当于直接把字符串exampleVar赋值给了变量，输出自然是这个固定字符串，和你的JS变量没有任何关系

解决方案 #

根据你的使用场景选对应方案即可：

1. 如果你要赋值的是固定值、或者是服务端上下文已经存在的变量，直接在Handlebars逻辑中完成赋值，不需要额外定义JS变量：

{{!-- 直接给服务端变量赋值你需要的字符串 --}}
{{ assignVar "exampleVar" "string"}}

{{!-- 调用后直接输出不带引号的 string --}}
{{ getVar "exampleVar" }}

2. 如果你确实需要把服务端的Handlebars变量传递给前端JS使用，用以下写法：

{{ assignVar "exampleVar" "string"}}
<script>
// 用引号包裹getVar的输出，完成服务端变量到客户端JS变量的赋值
var exampleVar = "{{ getVar "exampleVar" }}";
console.log(exampleVar); // 控制台输出 string
</script>

注意：不存在「把客户端JS动态生成的变量反向传给Handlebars辅助方法使用」的可能性，服务端渲染完成后Handlebars的所有逻辑就已经执行完毕，客户端侧的后续操作无法修改服务端变量的值，如果需要在客户端复用动态值，直接用JS存储到本地存储、DOM属性等位置即可。

内容的提问来源于stack exchange，提问作者LingCod