如何正确使用 JavaScript 与 Jade 一起使用渲染时传入的参数

Question

所以我的问题是关于 link 到子 Jade 模板中的外部 JavaScript 文件的正确位置，以及将数据（如果这可能吗？）传递给这些 JavaScript 个文件。

所以我正在使用 Express，并使用传入的数据渲染我的 Jade 文件，如下所示：

router.get('/', function(req, res, next) {
    tflSentimentAnalysis.fetchTflSentiments(credentials, function(results){
        res.render('twitterInsights', results);
    });
});

现在可以使用

在我的 twitterInsights.jade 中以正常方式访问数据

#{results.attributeName}

我有一个非常简单的 Jade 文件，它从 Jade 模板扩展而来，如下所示：

extend layout
block content
    h2 Title of page
    p Page contents will go here

我需要包含 2 个 JavaScript 文件。首先是 bower_components 中的 D3.js 库，其次是 public/javascripts 中我自己的 JavaScript 文件。

script(src="/bower_components/d3/d3.min.js")
script(src="/public/javascripts/twitterVisualisation.js")

jade模板中link到JavaScript文件的最佳位置在哪里？

我的 JavaScript 文件 (twitterVisualisation.js) 需要在渲染时将数据传递给 jade。

将此数据传递到 JavaScript 文件的最佳方法是什么？

我一直在寻找这个问题的答案，很惊讶这不是一个常见问题。提前致谢。

Answer 1

一种可能：

extend layout

block content
  script.
    var results = !{JSON.stringify(results)};

  h2 Title of page
  p Page contents will go here

  script(src="/bower_components/d3/d3.min.js")
  script(src="/public/javascripts/twitterVisualisation.js")

基本上，results Jade 变量呈现为 JSON 字符串并放置在 results 客户端 JS 变量中，您可以从其他脚本中使用该变量).我通常不喜欢自己这样做（除非我必须这样做），因为它会创建一个全局变量 (results).

这取决于 twitterVisualisation.js 的内部结构是否有更好的方法。例如，如果该文件有一个您调用的函数，您可以将其重写为如下内容：

extend layout

block content
  script(src="/bower_components/d3/d3.min.js")
  script(src="/public/javascripts/twitterVisualisation.js")
  script.
    twitterVisualisationFunction( !{JSON.stringify(results)} );

  h2 Title of page
  p Page contents will go here

呈现结果和加载其他 JS 文件的顺序取决于哪种方法最适合其余代码。

如何正确使用 JavaScript 与 Jade 一起使用渲染时传入的参数

How to correctly use JavaScript with Jade working with parameters passed in on render

javascript

node.js

express

pug