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

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

我的webapp中有一个简单的视图：

@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 %}

{%extends“base.html”%}
{%block title%}条形图{%endblock%}
{%block content%}
{%with calendarMap=calendarMap%}
{%include“buttons.html”%}
{%endwith%}
var calendarMap={{calendarMap|tojson}}；
{%endblock%}

---

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

好吧，也许已经太晚了，但我们开始吧

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

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

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

---

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

您是否尝试过在App.calendarMap或window.calendarMap这样的名称空间中引用它？从架构师的角度来看，这是一个非常重要的答案，可能在开发web应用程序的各个级别都是如此。谢谢你@Mauro Baraldi