web-dev-qa-db-ja.com

jinja2変数をjavascriptスニペットに渡すことができません

Jinja2データをjavascriptに渡す方法Flask=REST url as /logs/<test_case_name>を使用しています] .getJSON()を使用して上記のURLを照会しようとしているため、テストケース名を持つjinja2データを.getJSON関数に渡します。

サンプルコード：

<script type="text/javascript">
  alert({{name}});
</script>

機能しません。何か提案はありますか？

javascriptpythonflaskjinja2
31
deeshank

変数を文字列にカプセル化する以外に、利益のためのjqueryがあります。

テンプレート言語とjavascriptを混在させることは一般的に悪い考えです。別の方法は、プロキシとしてhtmlを使用することです-そのような要素に名前を保存します

<meta id="my-data" data-name="{{name}}" data-other="{{other}}">

その後、javascriptで行う

var djangoData = $('#my-data').data();

これには次の利点があります。

  • javascriptは.htmlページに関連付けられなくなりました
  • jqueryはデータを暗黙的に強制します
44
rikAtee

引用符で試してください：

alert("{{name}}");
50
ndpu

私はこれがちょっと古いトピックであることを知っていますが、多くの意見を集めているので、まだ答えを探している人がいると思います。

最も簡単な方法は次のとおりです。

var name = {{name|tojson}};

「名前」が何であれ「解析」され、正しく表示されます： https://sopython.com/Canon/93/render-string-in-jinja-to-javascript-variable/

2
mr_info

これは私がやった方法です

私のhtml要素

<!--Proxy Tag for playlist data-->
<meta id="my_playlist_data" data-playlist="{{ playlist }}">

私のスクリプト要素

// use Jquery to get data from proxy Html element
var playlist_data = $('#my_playlist_data').data("playlist");

詳細は 。data（） documenttationをご覧ください

1
Suraj Nath