Jinja2 を使用してテンプレート内の Flask から JavaScript にデータを渡すにはどうすればよいですか?

テンプレート内の Flask から JavaScript にデータを渡す

Flask アプリケーションの API からデータをフェッチするとき、その情報を、対応するテンプレートの JavaScript に追加します。この記事では、Jinja2 テンプレートの機能を活用してこれを実現する方法について説明します。

Flask では、render_template 関数を使用して HTML テンプレートに変数を渡すことができます。ただし、これらの変数を JavaScript で使用できるようにするには、追加の手順が必要です。

Flask で使用されるテンプレート エンジンである Jinja2 は、テンプレート内に Python 式を埋め込むことを可能にする構文を提供します。これは、JavaScript スクリプト内を含め、テンプレート内のどこでも {{ variable }} を使用できることを意味します。

たとえば、API から座標を取得する次の Flask ルートを考えてみましょう:

<code class="python">@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)</code>

対応するテンプレートでは、次のようにジオコード変数を JavaScript に渡すことができます:

<code class="html"><script>
var someJavaScriptVar = '{{ geocode[1] }}';
</script></code>

これにより、JavaScript コード内の someJavaScriptVar として geocode[1] の値にアクセスできるようになります。

または、ジオコード変数を配列として渡すために、テンプレートで配列定義を生成できます。

<code class="html"><script>
var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
</script></code>

Jinja2 は、ループや if ステートメントなどのより高度な構造もサポートしています。複雑なデータ構造の生成を簡素化します。

さらに、tojson フィルターを使用してジオコード タプルを JSON 文字列に変換し、JavaScript での使用により適したものにすることができます。

<code class="html"><script>
var myGeocode = {{ geocode | tojson }};
</script></code>

これらの技術を使用すると、開発者は Flask と JavaScript の間でデータをシームレスに共有し、インタラクティブで動的な Web アプリケーションを実現できます。

以上がJinja2 を使用してテンプレート内の Flask から JavaScript にデータを渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。