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对象，我将能够使用它。但是，我想在bars.js中使用calendarMap？但是我遇到了一些范围问题（即bars.js无法识别这个calendarMap），我该怎么办呢？

Answer 1

嗯，也许为时已晚，但我们走了。

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

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

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

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

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

1 个答案: