如何在模板中将数据从 Flask 传递到 JavaScript? [英] How can I pass data from Flask to JavaScript in a template?
问题描述
我的应用调用返回字典的 API.我想将信息从这个 dict 传递给视图中的 JavaScript.我在 JS 中使用 Google Maps API，特别是，所以我想向它传递一个包含长/纬度信息的元组列表.我知道 render_template 会将这些变量传递给视图，以便它们可以在 HTML 中使用，但是我如何将它们传递给模板中的 JavaScript?
My app makes a call to an API that returns a dictionary. I want to pass information from this dict to JavaScript in the view. I am using the Google Maps API in the JS, specifically, so I'd like to pass it a list of tuples with the long/lat information. I know that render_template will pass these variables to the view so they can be used in HTML, but how could I pass them to JavaScript in the template?
from flask import Flask
from flask import render_template
app = Flask(__name__)
import foo_api
api = foo_api.API('API KEY')
@app.route('/')
def get_data():
events = api.call(get_event, arg0, arg1)
geocode = event['latitude'], event['longitude']
return render_template('get_data.html', geocode=geocode)
推荐答案
您可以在模板中的任何位置使用 {{ variable }}，而不仅仅是在 HTML 部分.所以这应该有效:
You can use {{ variable }} anywhere in your template, not just in the HTML part. So this should work:
<html>
<head>
<script>
var someJavaScriptVar = '{{ geocode[1] }}';
</script>
</head>
<body>
<p>Hello World</p>
<button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)" />
</body>
</html>
将其视为一个两阶段过程:首先，Jinja(Flask 使用的模板引擎)生成您的文本输出.这将发送给执行他看到的 JavaScript 的用户.如果您希望 Flask 变量在 JavaScript 中作为数组可用，则必须在输出中生成数组定义:
Think of it as a two-stage process: First, Jinja (the template engine Flask uses) generates your text output. This gets sent to the user who executes the JavaScript he sees. If you want your Flask variable to be available in JavaScript as an array, you have to generate an array definition in your output:
<html>
<head>
<script>
var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
</script>
</head>
<body>
<p>Hello World</p>
<button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
</body>
</html>
Jinja 还提供了来自 Python 的更高级的构造，因此您可以将其缩短为:
Jinja also offers more advanced constructs from Python, so you can shorten it to:
<html>
<head>
<script>
var myGeocode = [{{ ', '.join(geocode) }}];
</script>
</head>
<body>
<p>Hello World</p>
<button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
</body>
</html>
您还可以使用 for 循环、if 语句等等，请参阅 Jinja2 文档了解更多.
You can also use for loops, if statements and many more, see the Jinja2 documentation for more.
另外，看看 Ford 的回答，他指出了 tojson 过滤器，它是 Jinja2 标准集的补充过滤器.
Also, have a look at Ford's answer who points out the tojson filter which is an addition to Jinja2's standard set of filters.
2018 年 11 月tojson 现在包含在 Jinja2 的标准过滤器集中.
Edit Nov 2018: tojson is now included in Jinja2's standard set of filters.
这篇关于如何在模板中将数据从 Flask 传递到 JavaScript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
