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文件的顺序取决于哪种方法最适合您的其余代码。

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

1 个答案: