javascript - 如何在 Jade 中正确使用 JavaScript 处理渲染时传入的参数

Question

所以我的问题是关于在子 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 模板中链接到 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 文件的顺序取决于哪种方法最适合您的其余代码。