Come gestire i moduli Javascript nei template di Django?

Consente di dire che vogliamo una libreria di pezzi javascript a base di funzionalità (sto pensando jquery): Ad esempio:Come gestire i moduli Javascript nei template di Django?

un ajax dialogo
un selettore di data
una forma validatore
una scorrevole barra dei menu
una fisarmonica thingy

ci sono quattro pezzi di codice per ciascuno: alcuni Python, CSS, JS, & HTML.

Qual è il modo migliore per organizzare tutti questi pezzi in modo che:

ogni 'modulo' JavaScript può essere ordinatamente riutilizzati da diversi punti di vista
i quattro bit di codice che compongono la permanenza funzione completata insieme
i css/js/html parti appaiono nelle loro posizioni corrette nella risposta
dipendenze comuni tra moduli non si ripetono (es: un file javaScript in comune)

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

Sarebbe bello se, o c'è qualche modo per garantire che, quando chiamato da un templatetag, i modelli rispettato il {blocco% %} direttive. In questo modo è possibile creare un singolo modello con un blocco ciascuno per CSS, HTML e JS, in un singolo file. Richiamalo tramite un templatetag che viene chiamato dal modello di qualsiasi visualizzazione lo desideri. Questo ha un senso. Può essere fatto in qualche modo già? I miei template templatetag sembrano ignorare le direttive {% block%}.

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

c'è qualche molto rilevante gasbagging di mettere tali mezzi in forme qui http://docs.djangoproject.com/en/dev/topics/forms/media/ che probabilmente si applicano agli esempi Form Validator e la data picker.

fonte

2009-11-18 John Mee

Da un po 'di tempo da quando ho postato questo problema. Quello che ho fatto per risolverlo è:

scrivere le parti javascript è necessario come una libreria che viene servita in modo statico
chiamate le routine nella libreria statica dal modello con il lato server valori

È necessario il vincolo per scriverlo in modo che funga solo da script lato client; non essere tentato di provare e iniettare valori dal server al momento di servire il js. In definitiva ho trovato meno confuso applicare le variabili lato server rigorosamente nel modello html.

In questo modo sono in grado di:

mantenere i selettori JavaScript su tag html all'interno dello stesso file (vale a dire: il modello)
evitare del tutto templatetags
riutilizzo ogni javascript biblioteca in luoghi diversi, e
tenere i pezzi css/js/html in tutti i luoghi in cui ci si aspetta che si trovano

Non è perfetto, ma mi sta facendo arrivare fino a quando arriva un'idea più ordinata.

Per esempio una libreria js in "media/js/alertlib.js" potrebbe includere:

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

e il modello ha:

<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>

fonte

2010-03-09 03:15:41

Se più di una pagina utilizza un determinato file JS, è necessario prendere in considerazione la concatenazione di tutti insieme e il risultato minimo. Ciò riduce le connessioni nette che miglioreranno il tempo di caricamento complessivo della pagina. Non dimenticare di uscire dalla tua scadenza per almeno una settimana o due.

fonte

2009-11-18 05:59:05

Grazie Peter. Ci sono routine di compressione js là fuori che potrebbero essere un utile ripensamento in un pezzo di Response Middleware; tuttavia questa domanda riguarda il modo migliore per creare un progetto di django per facilitare l'uso di molte javascript nelle risposte senza che il malingiglio della fonte diventi caotico. Mi aspetto che "include" e "templatetags" saranno coinvolti in qualche modo. –

Hai ragione: ho avuto una conversazione nella mia testa e ti ho dato solo metà. Abbiamo provato a utilizzare i 'modelli di utilizzo per includere solo i file JS per qualsiasi pagina', ma in due clic l'utente ne avrebbe comunque risucchiati il 95%. Piuttosto che mangiare tutti questi download separati e dover gestire la confusione di assicurarsi che ogni pagina includesse le cose giuste, abbiamo provato a inserirle tutte in un file concatenato e minimizzarlo. Il risultato è stato sorprendentemente piccolo e abbiamo quindi inserito il tag di collegamento nel modello di base. Fatto. –

Sono d'accordo con Peter qui - Probabilmente è più facile solo concatenarli insieme e permettere all'utente di scaricarli tutti in una volta. Guarda le risorse di django come un modo semplice per gestire la concatenazione: https://launchpad.net/django-assets – sheats

Penso che avrete difficoltà a tenere insieme tutti e quattro i pezzi e ad applicarli in un colpo solo perché alcuni appaiono nei tag <head> e altri nei tag <body>.

Cosa hai fatto è fatto in modo che jQuery è caricato per tutte le pagine del mio base.html (così come il mio file css di base) ... poi, ho tag blocchi per {% block css %} e {% block js %}. I modelli che ereditano il file base.html possono fornire il proprio javascript e css (e solo le informazioni necessarie).

Ho creato alcuni tag modello che creano funzioni jax il cui output è basato sull'oggetto visualizzato (ad esempio, incluso object_id), che riduce la ricodifica.

Una cosa che non ho provato ma che mi interessa è django-compress.

fonte

2009-11-18 11:41:42 thornomad

Dai un'occhiata alla Django Sekizai che è stato creato solo per quello scopo.

fonte

2012-07-12 19:24:13

Come gestire i moduli Javascript nei template di Django?

risposta

Problemi correlati