web-dev-qa-db-fra.com

Flask url_for URLs en Javascript

Quelle est la méthode recommandée pour créer des URL dynamiques dans des fichiers Javascript lorsque vous utilisez flask? url_for est utilisé dans les modèles jinja2 et dans les vues python. Quelle est la méthode recommandée pour le faire dans les fichiers .js? Étant donné qu'ils ne sont pas interprétés par le moteur de modèle.

Ce que vous voulez fondamentalement faire est:

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

Ce qui n'est pas possible.

Mais naturellement, je peux l'exécuter dans un modèle:

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

Ce que @ dumbmatter suggère est à peu près considéré comme une méthode standard de facto. Mais je pensais qu'il y aurait une meilleure façon de le faire. J'ai donc réussi à développer ce plugin: Flask-JSGlue .

Après avoir ajouté {{ JSGlue.include() }}, vous pouvez effectuer les opérations suivantes dans votre code source:

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

ou:

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

La documentation Flask suggère d'utiliser url_for dans votre fichier HTML pour définir une variable contenant l'URL racine à laquelle vous pouvez accéder ailleurs. Ensuite, vous devrez créer manuellement les URL de vue par dessus, bien que je suppose que vous puissiez les stocker de manière similaire à l’URL racine.

14
dumbmatter

La réponse de @ jeremy est correcte et est probablement l'approche la plus courante, mais notez que dantezhu a écrit et publié une extension de fiole qui prétend effectuer la traduction exacte de URL à carte suggérée dans le script javascript. commentaire.

3
Yaniv Aknin

J'utilise ce truc sale et moche:

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

où scale est la variable javascript que je souhaite utiliser pour une demande AJAX . Donc, url_for génère une URL et JavaScript remplace le paramètre à l'exécution. Le code généré est quelque chose comme:

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

ce qui est assez étrange, mais ne trouve toujours pas de solutions plus élégantes.

En fait, en regardant le code de l'extension du flacon lié, il fait la même chose mais gère le cas général. 

2
Jacopofar

A la recherche d’une solution, ils ont proposé cette solution où 

  • Aucun ajout n'est requis

  • Pas d'URL de codage en dur  

La clé est de réaliser que Jinja2 a la capacité de rendre le javascript hors de la boîte. 

Configurez votre dossier de modèles sur quelque chose comme ci-dessous:

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

Dans votre point de vue.

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

Maintenant, au lieu de servir le javascript depuis votre dossier statique. Vous utiliseriez:

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

Après tout, vous générez le javascript à la volée, ce n’est plus un fichier statique.

Maintenant, à l'intérieur de votre fichier javascript, utilisez simplement le url_for comme vous le feriez dans n'importe quel fichier html. 

Par exemple, utiliser Jquery pour faire une demande Ajax

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

Dans mon cas, je tentais de créer dynamiquement des URL

J'ai résolu mon problème comme suit (Remarque: j'ai remplacé la syntaxe d'Angular par {[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