如何將數據從Flask傳遞到模板中的JavaScript?

我的應用程序調用返回字典的API。我想傳遞信息從這個dict到視圖中的JavaScript。我在JS中使用Google Maps API,具體來說,所以我想傳遞一個包含long / lat信息的元組列表。我知道render_template會將這些變量傳遞給視圖,所以他們可以在HTML中使用,但我如何將它們傳遞給模板中的JavaScript?

 

 

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部分。所以這應該工作:

 

 

<html>
<head>
<script>
var someJavaScriptVar = '{{ geocode[1] }}';
</script>
<body>
<p>Hello World</p>
<button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)" />
</body>
</html>

將其視爲一個兩階段過程:首先,Jinja(Flask使用的模板引擎)生成您的文本輸出。這被髮送給執行他看到的JavaScript的用戶。如果你想讓你的Flask變量作爲一個數組在JavaScript中可用,你必須在你的輸出中生成一個數組定義:

 

<html>
<head>
<script>
var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
</script>
<body>
<p>Hello World</p>
<button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
</body>
</html>

Jinja還提供了來自Python的更高級的構造,所以你可以縮短到:

 

<html>
<head>
<script>
var myGeocode = [{{ ', '.join(geocode) }}];
</script>
<body>
<p>Hello World</p>
<button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
</body>
</html>

你也可以使用for循環,if語句和更多,更多的Jinja2 documentation

另外看看ford的答案誰指出tojson過濾器是一個除了Jinja2’s standard set of filters

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章