Flask|Jinjia2|Javascript: 将 Flask 模板变量传入 Javascript

Question

将变量从 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 %}

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

Answer 1

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

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

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

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

或者你可以在渲染模板之前渲染这个 JS 文件，然后使用它。但我强烈建议不要使用这种方法。