Flask|Jinjia2|Javascript：将 Flask 模板变量传递到 Javascript

将变量从 Flask 模板传递到 Javascript 文件的最佳方法是什么？这是我的代码

我的网络应用程序中有一个简单的视图：

@webapp.route('/bars')
def plot_d3_bars():
  return render_template("bars.html", calendarMap = calendarMap)

我有一个模板化的 HTML 文件，如下所示：

{% extends "base.html" %}

{% block title %} Bar View {% endblock %}

{% block content %}

{% with calendarMap=calendarMap %}
    {% include "buttons.html" %}
{% endwith %}

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/static/css/d3.tip.v0.6.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Custom codes for d3 plotting -->
<link href="/static/css/bars.css" rel="stylesheet">
<script> var calendarMap = {{ calendarMap|tojson }}; </script>
<script src="/static/bars.js"></script>

{% endblock %}

之前的答案告诉我，我可以将变量 jsonify 为 JSON 对象，然后就可以使用它了。但是，我想在bars.js 中使用calendarMap 吗？但我遇到了一些范围界定问题（即，bars.js 无法识别此 calendarMap），我应该做什么？

好吧，也许为时已晚，但我们开始吧。

当您使用嵌入 HTML 代码中的 JavaScript 代码时，该脚本将与 HTML 一起呈现。因此，JavaScript 中引用的任何变量（作为 Flask 变量）都将在呈现的页面中可用。

当您使用 HTML 代码中链接的外部 JavaScript 文件时，在呈现 HTML 之前，其代码已经存在。在某些情况下，我可能会说大多数情况下，您不是该文件的所有者。因此 JS 文件中引用的任何变量都不会被渲染。

您可以通过 JS 代码将此变量放入 HTML 中，并使用外部 JS 文件中的函数使用此数据。

或者您可以在渲染模板之前渲染此 JS 文件并使用它。但我强烈建议不要使用这种方法。