Vai al contenuto

Non usi i templates jQuery? Non sai cosa perdi…

In preparazione al suo imminente discorso sui Templates in jQuery, Rey Bango ha eseguito una ‘profonda immersione’ sul plugin jQuery Template creato da Microsoft.

La cosa più interessante che riguarda i template è il fatto che lasciano facilmente strutturare i contenuti senza tutti i problemi di concatenazione di stringhe.

Ad esempio, supponiamo di dover visualizzare una serie di di dati che contengono un ID ed un nome facendo visualizzare un collegamento ipertestuale sul nome. Dovremmo creare un codice come questo:

ma, utilizzando i template, potremmo avere un codice più leggibile e gestibile:

Il secondo frammento di codice è molto semplice da realizzare: è un template creato per visualizzare il nome come collegamento ipertestuale in una lista.
In primo luogo, includiamo jQuery e il plugin Templates jQuery nella nostra pagina:

poi andiamo a definire i dati che si desidera vengano visualizzati.
Questi potrebbero provenire da una chiamata XHR oppure essere predefiniti, come ad esempio:

Andremo poi a definire il template:

I tag nello “script” sono necessari e devono essere utilizzati in quanto permettono al modello di essere inserito all’interno del corpo della pagina. Si può notare che i segnaposto sono stati definiti come $(id) ed $(name) che sono gli stessi nomi utilizzati per gli identificatori dei nostri dati. Il simbolo “${}” dice al parser del template che il campo deve essere sostituito con il valore atteso.

A questo punto effettuiamo la chiamata al plugin jQuery Template per visualizzare i dati utilizzando il modello:

Il metodo .tmpl() accetta i dati che abbiamo definito e gestisce l’analisi del modello che abbiamo selezionato.
Abbiamo poi utilizzato la funzione jQuery .appendTo() per aggiungere i risultati in una lista non ordinata.

Tutto questo dà il seguente risultato:

Ed ecco il codice completo da utilizzare:

( Liberamente tradotto dall’articolo Not Using jQuery JavaScript Templates? You’re Really Missing Out di Rey Bango )

Scritto da jqueryitalia

Sito WEB: https://www.jqueryitalia.org

Contenuto non disponibile.
Per visualizzarlo, devi acconsentire all'utilizzo dei cookies cliccando su "ACCONSENTO" nel banner sottostante.

Questo sito utilizza i cookies, anche di terze parti: se chiudi questo banner, scorri la pagina o continui con la navigazione, tu ACCONSENTI all'utilizzo dei cookies. MAGGIORI INFORMAZIONI

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi