Suggerimento rapido un'introduzione a jQuery Templating

JavaScript Templating è una buona idea: ti permette di convertire facilmente JSON in HTML senza doverlo analizzare. Alla conferenza MIX10 di Microsoft, hanno annunciato che stanno iniziando a contribuire al team jQuery. Uno dei loro sforzi è fornire un plug-in per i template. In questo suggerimento veloce, ti mostrerò come usarlo!

Iscriviti alla nostra pagina YouTube per guardare tutti i tutorial video!

Avrai bisogno dei dati per modello; probabilmente recupererai JSON dal tuo server; ovviamente, i letterali Object / Array funzionano altrettanto bene, quindi è quello che usiamo:

 var data = [name: "John", età: 25, nome: "Jane", età: 49, nome: "Jim", età: 31, nome: "Julie", età: 39 anni , nome: "Joe", età: 19, nome: "Jack", età: 48];

Il modello è scritto in tag; per ogni elemento nel tuo JSON, il modello renderizza l'HTML; quindi, restituirà l'intero frammento HTML all'utente. Possiamo ottenere i valori JavaScript dal modello utilizzando % e% come tag. Possiamo anche eseguire JavaScript regolari all'interno di questi tag. Ecco il nostro modello:

 
 % = $ i + 1% 
Nome:  % = nome%
 % if ($ context.options.showAge) % 
Età:  % = età%
 %% 

Per rendere i dati con il modello, chiama il plugin; passare i dati al metodo plugin; puoi opzionalmente passare anche in un oggetto opzioni. (Queste non sono opzioni predefinite, sono valori che si desidera utilizzare all'interno del modello, forse per la ramificazione).

 $ ("# listTemplate"). render (data, showAge: true). appendTo ("ul");

È così facile! Divertiti con questo! Puoi ottenere il codice completo per questo suggerimento rapido su Github