web-dev-qa-db-ja.com

外部javascriptファイルでJinja2テンプレートエンジンを使用する

PythonとFlaskを使用してWebプロジェクトに取り組んでいます。外部のJavaScriptファイルでpythonによって送信されたパラメーターにアクセスできるかどうか疑問に思っていましたか？うまく機能していますか？ htmlファイルまたはhtmlファイルに埋め込まれたjsを使用しますが、javascriptがexternの場合は使用しません。

下記参照。

pythonコード

@app.route('/index')
def index():
    return render_template('index.html', firstArg = 2, secondArg = 3)

Index.htmlコード

...
<body>
    <p>The first arg is {{firstArg}}.</p>
    <script src="index.js"></script>
</body>
...

そしてindex.jsファイル

window.onload=function(){
    console.log('{{secondArg}}');
};

したがって、最初の引数はhtmlファイル内では正しいですが、2番目の引数はjsファイルでは機能しません。ブラウザにUnexpected token {が表示されています。

たぶん、外部のjsでそれを使用することは不可能ですか？

そうでなければ、htmlの入力データとしてsecondArgを挿入し、それをjsファイル内に取得する必要がありますが、あまりきれいではありません。

誰かが助けてくれるなら、ありがとう。

javascriptpythonflaskexternaljinja2
22
Loric-

Index.jsは、おそらくflaskインスタンスによって提供されませんが、テンプレートエンジンによって処理されないことは間違いありません。また、HTMLと同じコンテキストを持たない場合でも、要求されました。

最もクリーンな解決策は、_index.js_に開始関数を設定し、それをhtmlファイルから呼び出すことだと思います。

_<body>
    <p>The first arg is {{firstArg}}.</p>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript">
        yourInitFunction({{secondArg}});
    </script>
</body>
_

また、flaskにindex.jsをルーティングするように指示することもできます：@yourapp.route('index.js')route('/index')で行ったのと同じですが、これはおそらくそれほどではありません良いアイデア。

22
t.animal

また、index_js.html（または同じindex.js）ファイルと{% include 'index_js.html' %}を必要な場所に作成することもできます。

1）index_js.htmlが好きな場合-そこで<script> here is some JS templated code </script>を使用します。さらに：テンプレート化されたhtmlの{% include 'index_js.html' %}。

2）または、index.jsが好きな場合は、<script> {% include 'index.js' %} </script>を実行します。

0
Дмитрий Валетов