Question

我正在尝试使用Express后端（在npm上为express-handlebars）上在Handlebars.js后端设置的上下文变量作为<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)

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

Answer 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

从<script>标记中使用Handlebars.js上下文

1 个答案: