スポンサーリンク
概要
WEBアプリで、画面側(ブラウザ側)で動的に画面表示を変更したい場合Javascirptを使った処理が必要になります。
（例えば、職業をコンボボックスで選択すると、その後に職業に応じた質問が表示されるなど。）
このような場合、下記の方法が考えられます。
- 全ての要素のHTML要素を定義しておいて、DOM操作で動的に表示を切り替える
- 全ての要素をJS側でデータとして保持しておき、DOM操作で動的に表示を切り替える
後者の方が、DOM操作が少なく済むので個人的には好きです。
イメージ的には下記のような変数をJS側で定義しておく感じですね。
|
1 2 3 |
<script> let seatJson = {"10:00": {"2": false, "1": true}, "10:30": {"2": false, "1": true} } </script> |
一般的にはそういったJSのデータを作るのは別途REST APIを呼んだり、HTML要素を読み込むなど、動的にデータを生成します。
ですが、実はhtmlテンプレートを使用してサーバー側でタグを描画するの同じように、Javasciprtの内容自体も実は動的に描画できたりします。
今回はPythonのDjangoでこのような方法を実現するための手段を説明します。
Pythonの変数を直接jsonデータとして描画できるので自前で隠しHTML要素を描画する方法より楽ちんです。
スポンサーリンク
スポンサーリンク
方法
View
まずはView側の説明をします。
View上ではhtmlテンプレートに渡す変数を定義して、json.dumpsでjson化してからテンプレートに渡すだけです。
|
1 2 3 4 5 6 7 |
import json def hoge(request): data = { 任意のデータ } seat_json = json.dumps(data) return render(request, 'xxxx.html', {'seat_json': seat_json}) |
スポンサーリンク
テンプレート
テンプレート側は渡されたデータをJSの変数として描画するだけです。
safeをパイプしてエスケープも必要です。
|
1 2 3 4 5 |
html要素は省略 <script> let seatJson = {{seat_json | safe}} </script> |