Skip to content
Tags

,

Cohabitation Jinja et AngularJS

16 avril 2013

Jinja2, un moteur de templates en Python, et AngularJS, un framework web côté client en Javascript, utilisent tous les deux les accolades pour indiquer une variable ou une structure à interpréter.
Par exemple {{ choucroute }} pour une variable qui a du goût.

D’où conflit.
Pour résoudre ce problème, trois possibilités :

Diviser les fichiers pour régner

Séparer l’utilisation de chaque template :

  • variables Jinja uniquement dans les fichiers html fournis directement par l’application Python ;
  • variables AngularJS uniquement dans les fichiers chargés dynamiquement (par exemple /partials/detail-choucroute.html).

Simple à mettre en place mais limité.

Commenter les accolades

Protéger le code AngularJS sensible en empêchant son interprétation par Jinja :

  • {{ '{{' }} pour ne pas interpréter des accolades ;
  • {% raw %} pour un code plus long.

Changer les délimiteurs Jinja

Redéfinir les délimiteurs dans l’environnement de Jinja :

jinja_env = jinja2.Environment(...)
jinja_env.block_start_string = '(%'
jinja_env.block_end_string = '%)'
jinja_env.variable_start_string = '(('
jinja_env.variable_end_string = '))'
jinja_env.comment_start_string = '(#'
jinja_env.comment_end_string = '#)'

L’ensemble des caractères accolades ont été remplacés par des parenthèses pour une raison de cohérence. Limiter la redéfinition des délimiteurs à variable_start_string et variable_end_string devrait suffire.

Bien évidemment, libre à chacun de choisir d’autres délimiteurs.

À noter qu’il est possible d’obtenir un résultat similaire avec Django.

From → Python

Laisser un commentaire

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :