151

私のアプリは、辞書を返す API を呼び出します。ビューで、この dict から JavaScript に情報を渡したいと思います。具体的には、JS で Google Maps API を使用しているので、長い/緯度の情報を含むタプルのリストを渡したいと思います。これらの変数をビューに渡して HTML で使用できるようにすることはわかっていrender_templateますが、テンプレートで 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)
4

10 に答える 10

176

{{ variable }}HTML 部分だけでなく、テンプレートのどこでも使用できます。したがって、これは機能するはずです：

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

これは 2 段階のプロセスと考えてください。まず、Jinja (Flask が使用するテンプレート エンジン) がテキスト出力を生成します。これは、表示された JavaScript を実行するユーザーに送信されます。Flask 変数を JavaScript で配列として使用できるようにする場合は、出力で配列定義を生成する必要があります。

<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 からのより高度なコンストラクトも提供するため、次のように短縮できます。

<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 のドキュメントを参照してください。

また、 Jinja2 の標準的なフィルター セットにtojson追加されたフィルターを指摘している Ford の回答もご覧ください。

2018 年 11 月編集: tojsonJinja2 の標準フィルター セットに含まれるようになりました。

于 2012-06-24T14:59:00.967 に答える
12

または、エンドポイントを追加して変数を返すこともできます。

@app.route("/api/geocode")
def geo_code():
    return jsonify(geocode)

次に、XHR を実行して取得します。

fetch('/api/geocode')
  .then((res)=>{ console.log(res) })
于 2017-05-15T18:21:54.707 に答える
-1

一部の js ファイルは Web またはライブラリから取得され、自分で作成したものではありません。次のような変数を取得するコード:

var queryString = document.location.search.substring(1);
var params = PDFViewerApplication.parseQueryString(queryString);
var file = 'file' in params ? params.file : DEFAULT_URL;

このメソッドは js ファイルを変更せず (独立性を維持)、変数を正しく渡します!

于 2017-11-22T04:28:56.370 に答える