在包含的前端js文件中使用服务器生成的变量

Question

node.js初学者在这里。 因此，我正在编写一个应用程序，每隔一秒钟我就会得到服务器生成的数字，并通过应用程序将其粘贴。转到我的index.pug文件，我想在嵌入js文件中使用该数字。我该怎么办？

server.js

randomNumber = 4;
app.get('/',(req,res) => {
    res.render('index', {title: 'Number', count: randomNumber})
});

index.pug

html
 head
  title= title
 body
  h1= count
  script(src="includes/client.js")

client.js

var chart = new CanvasJS.Chart("chartContainer", { 
   title: {
    text: count
   },
});

现在我该如何使用 client.js 文件中的randomNumber变量？我在这里想念什么？该应用程序总是告诉我 count 未定义

Answer 1

您需要记住，您的请求中包含三个单独的Javascript上下文：

1. 路线（server.js）
2. 视图/模板（index.pug）和
3. 浏览器

除非您将变量明确传递给链中的下一个变量，否则上述任何一个都不能访问其他变量。

您要在res.render语句中将标题和计数显式传递到视图/模板中，然后再将它们进一步传递到浏览器中，您需要使用unescaped string interpolation并将其添加到{ {1}}标签如下：

<script>

如果您希望count作为字符串传递，请改为这样定义：

html
 head
  title= title
 body
  h1= count
  script.
    var count = !{count};
  script(src="includes/client.js")