1. Accueil
  2. Question et réponse
  3. Comment gérer les modules Javascript dans les templates django?

Comment gérer les modules Javascript dans les templates django?

2009-11-18 4 views
10

Disons que nous voulons une bibliothèque de pièces à base de JavaScript de la fonctionnalité (je pense jquery): Par exemple:Comment gérer les modules Javascript dans les templates django?

  1. un dialogue ajax
  2. un sélecteur Date
  3. une forme validateur
  4. une barre de menu coulissant
  5. un accordéoniste thingy

Il y a quatre morceaux de code pour chacun: certains Python, CSS, JS, & HTML.

Quelle est la meilleure façon d'organiser toutes ces pièces afin que:

  • peut être soigneusement réutilisé chaque javascript « module » par des vues différentes
  • les quatre bits de code qui composent le séjour de la fonction terminée ensemble
  • les css/js/html parties apparaissent dans leurs bons endroits dans la réponse
  • dépendances communes entre les modules ne sont pas répétées (par exemple: un fichier javascript en commun)

x --------------

Ce serait bien si, ou est-il un moyen de faire en sorte que, lorsqu'il est appelé à partir d'un templatetag, les modèles respectent le {% block %} directives. Ainsi, on pourrait créer un seul modèle avec un bloc pour CSS, HTML et JS, dans un seul fichier. Invoquez-le via un template-template qui est appelé à partir du template de n'importe quelle vue le veut. Cela a un sens. Est-ce que cela peut déjà être fait? Mes modèles de template semblent ignorer les directives {% block%}.

x --------------

Il y a quelques très pertinent gasbagging de mettre ces médias sous des formes ici http://docs.djangoproject.com/en/dev/topics/forms/media/ qui appliquent probablement aux exemples sous forme de validateur et sélecteur de date.

Source

2009-11-18 John Mee

Répondre

6

Été un certain temps depuis que j'ai posté ce problème. Ce que je fais pour le résoudre est:

  1. écrire les parties javascript dont vous avez besoin d'une bibliothèque qui est servi statiquement
  2. appeler les routines dans la bibliothèque statique du modèle avec votre côté serveur valeurs

Restraint est requis pour l'écrire de telle manière qu'il agisse comme un script côté client seulement; ne soyez pas tenté d'essayer et d'injecter des valeurs du serveur au moment de servir le js. En fin de compte, j'ai trouvé moins déroutant d'appliquer des variables côté serveur strictement dans le modèle html.

De cette façon, je peux:

  1. garder les sélecteurs javascript sur les balises HTML dans le même fichier (par exemple: le modèle)
  2. éviter templatetags tout
  3. réutilisation chaque javascript bibliothèque dans différents endroits, et
  4. garder les pièces css/js/html dans tous les endroits où ils devraient trouver

Ce n'est pas parfait, mais ça m'agace jusqu'à ce qu'une idée plus nette se présente.

Par exemple, une bibliothèque js dans "médias/js/alertlib.js" pourrait inclure:

function click_alert(selector, msg){ 
    $(selector).click(function(){ alert(msg) }) 
}

et le modèle a:

<script type="text/javascript" src="media/js/alertlib.js"></script> 
<script type="text/javascript"> 
    click_alert('#clickme', {% message %}) 
</script> 

<div id='clickme'>Click Me</div>

Source

2010-03-09 03:15:41

1

Si plus d'une page utilise un fichier JS donné, vous devez envisager de les concaténer ensemble et de réduire le résultat. Cela réduit les connexions réseau, ce qui améliore le temps de chargement global de la page. N'oubliez pas de passer votre temps d'expiration à au moins une semaine ou deux.

Source

2009-11-18 05:59:05

+0

Merci Peter. Il existe des routines de compression js qui pourraient être utiles après coup dans un élément de Middleware de réponse; Cependant, cette question est sur la meilleure façon de mettre en page un projet django pour faciliter le fait d'avoir beaucoup de javascript dans les réponses sans maux de tête de la source devenant chaotique. Je m'attends à ce que 'includes' et 'templatetags' soient impliqués d'une manière ou d'une autre. –

+1

Vous avez raison: j'ai eu une conversation dans ma tête et je ne vous en ai donné que la moitié. Nous avons essayé d'utiliser la commande 'utiliser des modèles pour inclure uniquement les fichiers JS pour une page donnée', mais en deux clics, l'utilisateur en aurait avalé 95% de toute façon. Plutôt que de manger tous ces téléchargements séparés et d'avoir à faire face au désordre de s'assurer que chaque page comprenait les bonnes choses, nous avons essayé de tout mettre dans un fichier concaténé et de le réduire. Le résultat était étonnamment petit et nous avons simplement mis le tag-link dans le template de base. Terminé. –

+1

Je suis d'accord avec Peter ici - Il est probablement plus facile de simplement les concaténer ensemble et de laisser l'utilisateur les télécharger tous en même temps. Regardez django-assets comme un moyen facile de gérer la concaténation: https://launchpad.net/django-assets – sheats

0

Je pense que vous allez avoir du mal à garder les quatre pièces ensemble et à les appliquer d'un seul coup - simplement parce que certaines apparaissent dans vos tags <head> et d'autres dans les tags <body>.

Quels ont fait est fait en sorte que jQuery est chargé pour toutes les pages de mon base.html (ainsi que ma base fichier) ... puis css, je balises de bloc pour {% block css %} et {% block js %}. Les modèles qui héritent du fichier base.html peuvent fournir leur propre javascript et css (et uniquement les éléments nécessaires).

J'ai créé des balises de gabarit qui créent des fonctions ajax dont la sortie est basée sur l'objet affiché (par exemple, y compris le object_id) - ce qui réduit le recodage.

Une chose que je n'ai pas essayé mais que je suis intéressé est django-compress.

Source

2009-11-18 11:41:42 thornomad

1

Jetez un oeil à Django Sekizai qui a été créé pour juste ce but.

Source

2012-07-12 19:24:13

Questions connexes

 Questions connexes