web-dev-qa-db-ja.com

Flask JavaScriptのurl_for URL

フラスコを使用するときにJavascriptファイルに動的URLを作成する推奨方法は何ですか？ jinja2テンプレートおよびpython views url_forが使用されている場合、.jsファイルでこれを実行する推奨方法は何ですか？テンプレートによって解釈されないため]エンジン。

基本的にやりたいことは：

// in comments.js
$.post(url_for('comment.comment_reply'));

それは不可能です。

しかし、当然、テンプレートでそれを実行できます。

<script>
    $.post(url_for('comment.comment_reply'));
</script>
javascriptpythonflaskurl-for
34
Erik Rothoff

@dumbmatterの提案は、事実上の標準的な方法と見なされています。しかし、もっと良い方法があると思いました。そこで、このプラグインを開発しました： Flask-JSGlue 。

{{ JSGlue.include() }}を追加した後、ソースコードで以下を実行できます。

<script>
    $.post(Flask.url_for('comment.comment_reply', {article_id: 3}));
</script>

または：

<script>
    location.href = Flask.url_for('index', {});
</script>
30
Stewart Park

Flask documentation は、url_forをHTMLファイルに追加して、他の場所からアクセスできるルートURLを含む変数を設定します。次に、その上にビューURLを手動で作成する必要がありますが、ルートURLと同様に保存できると思います。

15
dumbmatter

@jeremyの答えは正解であり、おそらくより一般的なアプローチですが、別の答えとして、dantezhuが正確なurl-route-mapを行うことを主張する flask extension を書いて公開していることに注意してくださいコメントで提案された-javascriptへの翻訳。

3
Yaniv Aknin

私はこの汚くていトリックを使用します：

"{{url_for('mypage', name=metadata.name,scale=93,group=2)}}"
.replace('93/group',scale+'/group')

scaleは、AJAXリクエストに使用するjavascript変数です。URLを生成し、JavaScriptを実行時にパラメーターに置き換えます。生成されたコードは次のようになります。

"/ajaxservive/mynam/scale/93/group/2".replace('93/group',scale+'/group')

これはかなり奇妙ですが、それでももっとエレガントなソリューションを見つけることはできません。

実際、 コードを見て リンクされたflask拡張機能の場合、同じことを行いますが、一般的なケースを管理します。

2
Jacopofar

解決策を探していたところ、彼らはこの解決策を思いついた

  • アドオンは不要です

  • ハードコーディングURLなし

重要なのは、Jinja2には、そのままJavaScriptをレンダリングする機能があります。

テンプレートフォルダーを次のように設定します。

/template
    /html
        /index.html
    /js
        /index.js

Views.pyで

@app.route("/index_js")
def index_js():
    render_template("/js/index.js")

これで、静的フォルダーからJavaScriptを提供する代わりに。次を使用します。

<script src="{{ url_for('index_js') }}"></script>

結局のところ、あなたはその場でJavaScriptを生成しているので、もはや静的ファイルではありません。

ここで、javascriptファイルの内部で、単にurl_for任意のhtmlファイルでのように。

たとえば、Jqueryを使用してAjaxリクエストを作成する

$.ajax({
  url: {{ url_for('endpoint_to_resource') }},
  method: "GET",
  success: call_back()
})
2
Louis T

私の場合、URLを動的に作成しようとしていました

次のように問題を解決しました（注：Angularの構文を{[x]}に置き換えました：

<ul>
    <li ng-repeat="x in projects">
        {[x.title]}
        {% set url = url_for('static',filename="img/") %}

        <img src="{{url}}{[x.img]}">
    </li>
</ul>
0
Cole Murray