在 <script> 标记中使用 Handlebars.js 上下文答案

【问题标题】：Use Handlebars.js context from within <script> tag在 <script> 标记中使用 Handlebars.js 上下文
【发布时间】：2019-07-06 19:49:15
【问题描述】：

我正在尝试使用Express 后端上设置的上下文变量，使用Handlebars.js（npm 上的express-handlebars）作为<script> 标记内的视图控制器。我读了this post，但答案似乎有点骇人听闻。这是代码中的问题：

app.js（服务器）

app.get('/', (req, res) => {
  res.render('index', {
    data: [1, 2, 3]
  }
}

index.handlebars

<script>
  const data = {{data}}
</script>

<script src="js/index.js"></script>

index.js（客户端）

console.log(data)

我这样做是为了可以从index.js 访问data 变量，所以更好的方法可以解决这个问题。

【问题讨论】：

标签： node.js express handlebars.js express-handlebars

【解决方案1】：

不幸的是，这是如果您需要使用把手模板一次性发送 html 作为响应的唯一方法。

服务器端渲染创建一个完整的页面，您的所有数据都应该被“解析”并准备好。

您可以规避使用 AJAX 请求（注意这会添加第二个请求）并从那里返回一个 JSON 响应，您可以直接处理它（推荐方式）：

//somewhere in your page.hbs

    <script>
      const loadObject = () => fetch('/express/path')
                                 .then(response => response.json)
                                 .then(obj => {
                           //do whatever with the obj
    })
      window.onload = loadObject; 

    </script>

在你的快递中。

  app.get('/express/path', (req, res) => {
      res.json({
        data: [1, 2, 3]
      })
    })

您还可以使用<script src=/express/to/javascript > 来请求特定的 .js 文件。从那里使用任何全局范围变量。您可以在下面的链接中看到一个很好的讨论：

HTML/Javascript: how to access JSON data loaded in a script tag with src set

【讨论】：

是的，这就是我最终要做的。虽然我意识到我也可以使用帮助器对对象进行字符串化，并通过将引用放在引号中来在模板中解析它。