Incapables de passer jinja2 variables dans l'extrait de code javascript

Comment puis-je passer jinja2 de données en javascript.
J'ai un Flacon RESTE de l'url comme /logs/<test_case_name>
Je suis en train d'utiliser .getJSON() à la requête de l'URL ci-dessus et donc aurait envie de passer à la jinja2 de données qui a le testcasename à .getJSON fonction.

exemple de code:

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

Il ne fonctionne pas.
Toutes les suggestions s'il vous plaît?

  • {{ name|safe }} devrait fonctionner
  • il force de travail 🙁
  • ses généralement une mauvaise idée de mélanger du langage de template avec javascript. Une alternative serait d'utiliser du code html comme un proxy - stocker le nom d'un élément comme <meta id="mon-données" data-name="{{nom}}" data-autres="{{autres}}">, puis dans le javascript ne djangoData = $('#mon-data').de données();
InformationsquelleAutor deeshank | 2014-02-07
  1. 44

    autres que l'encapsulation de la variable dans une chaîne de caractères, un autre est jquery pour les bénéfices:

    son généralement une mauvaise idée de mélanger du langage de template avec javascript. Une alternative serait d'utiliser du code html comme un proxy - stocker le nom d'un élément comme

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

    puis dans le javascript ne

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

    cela a un avantage dans:

    • javascript n'est plus liée à l' .page html
    • jquery contraint de données implicitement
    • Merci @rikAtee. J'ai suivi la même logique.. juste que j'ai utilisé normale div à la place.
    • Il fonctionne, mais, je crois que c'est très exagéré de la méthode de votre fichier html sera gonflé avec des attributs des données, je pense que la réponse ci-dessous (ndpk) est une meilleure approche
    • Niiiice! Maintenant, je peux isoler totalement html de javacript. Cela me permettra une intégration propre à flasque-Actifs. Merci!
    • J'ai du mal à comprendre comment la syntaxe html correspond à la question d'origine. Est data-name une chaîne de caractères arbitraire, ou faut-il avoir pour être data-name? Ou tout simplement de démarrer avec data-? Où est la other variable viennent?
    • il ressemble à djangoData est un objet avec les propriétés nom et d'autres. Ainsi, vous pouvez accéder à l'aide des djangoData.nom.
    • Je suppose que je comprends la mauvaise idée de chose, mais comment dois-je faire des graphiques? J'ai 50-60 points de données à la parcelle.
    • Je pense qu'il vaut la peine de mentionner que vous ne pouvez pas donner n'importe quel nom de variable à l'intérieur de la balise meta, alors d'abord, j'ai essayé de <meta id="géodonnées" test="{{test}}"> et offcause il ne fonctionne pas. Donc, assurez-variables comme ceci <meta id="géodonnées de base de données" test="{{test}}">. Il doit être clair à partir de la réponse, mais pour une raison quelconque, il n'était pas clair pour moi au premier abord.
    • Ici est la possibilité offerte à partir de flacon. Ils recommandent d'utiliser le json filtre flask.pocoo.org/docs/0.12/templating/#standard-filters <script type=text/javascript> doSomethingWith({{ user.username|tojson|safe }}); </script>

    InformationsquelleAutor rikAtee
  2. 50

    Essayer avec des guillemets:

    alert("{{name}}");
    • Je pense que cela ne fonctionne pas si name contient des sauts de ligne comme '\n'. Il jette un javascript erreur de syntaxe.
    InformationsquelleAutor ndpu
  3. 3

    Je sais que c'est un peu vieux sujet, mais puisqu'il attire beaucoup de vues je suppose que certaines personnes sont toujours à la recherche d'une réponse.

    Voici la façon la plus simple de le faire: 

    var name = {{name|tojson}};

    Elle sera "analyser" ce " nom " est et de l'afficher correctement:
    https://sopython.com/canon/93/render-string-in-jinja-to-javascript-variable/

    InformationsquelleAutor mr_info
  4. 1

    C'est la façon dont je l'ai fait

    Mon Élément html

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

    Mon script élément

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

    Voir .de données() documenttation pour plus d'

    InformationsquelleAutor Suraj Nath