使用 <script> 标签中的 Handlebars.js 上下文

Question

我正在尝试使用在 Express backend using Handlebars.js (express-handlebars on npm) as the view controller from within a <script> tag. I read 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 变量，所以更好的方法可以解决这个问题。

Answer 1

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

服务器端呈现会创建一个完整的页面，您的所有数据都应该 "parsed" 并准备就绪。

您可以通过使用 AJAX 请求（请注意，这会添加第二个请求）和 [=37] 规避 =] 来自那里的 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 文件。然后从那里使用任何全局范围变量。您可以在下面的 link 中看到很好的讨论：

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

使用 <script> 标签中的 Handlebars.js 上下文

Use Handlebars.js context from within <script> tag

node.js

express

handlebars.js

express-handlebars