Share
Qualche tempo fa, ti ho mostrato come usare il plugin per template jQuery in un suggerimento veloce; in questo suggerimento rapido, ti mostrerò come usare un'altra libreria di modelli, Moustache, che è altrettanto facile da usare.
Puoi scaricare Mustache.js dalla sua pagina del progetto GitHub; se lo si utilizzerà in un progetto, è possibile scaricarlo o git clone essa; Ho appena fatto riferimento al file raw su GitHub per questo suggerimento rapido:
Ora puoi usarlo per il rendering dei dati!
Molto probabilmente, riceverai i tuoi dati dal server sotto forma di JSON quando stai utilizzando Moustache in produzione. Tuttavia, è altrettanto semplice codificare un oggetto letterale e usarlo, il che è ciò che faremo qui.
Accentsconagua
var data = name: "Some Tuts + Sites", sites: ["Netsuts +", "Psdtuts +", "Mobiletuts +"], url: function () return function (text, render) text = render (testo); var url = text.trim (). toLowerCase (). split ('tuts +') [0] + '.tutsplus.com'; return '' + text + ''; ; Ora siamo pronti per definire il modello.
Il tuo modello è semplicemente una stringa; puoi utilizzare una normale stringa JavaScript vecchia oppure puoi inserire il modello in un tag script e ottenerlo tramite qualcosa come jQuery html () metodo (o, ovviamente, innerHTML). Questa è probabilmente una scelta migliore se stai usando un modello complicato, perché puoi usare interruzioni di riga. Ricorda solo di dare alla sceneggiatura un tipo di qualcosa diverso da "text / javascript"; in caso contrario, i browser potrebbero provare a interpretarlo e ciò causerà errori.
Il tuo modello sarà principalmente HTML; quando si desidera utilizzare un valore dai dati, fare riferimento al nome della chiave del valore nei dati. Per usare il nome valore nei dati sopra, faresti riferimento in questo modo:
nome
I blocchi sono un pezzo importante di Moustache: puoi usarli per ottenere all'interno di array e oggetti, oltre che per lambda (funzioni). È piuttosto semplice fare blocchi: basta usare un tag di apertura e chiusura: quello di apertura inizia con una cancelletto (#) e quella di chiusura con una barra (/).
Durante l'iterazione su array, l'operatore implicito "." Otterrà il valore. Se siti era un oggetto, usavi le sue chiavi all'interno del blocco.
L'uso delle funzioni è un po 'più complicato. Per la parte dati, Mustache.js richiede una funzione che ritorna la funzione da utilizzare. Quella funzione ottiene il testo da rendere (tutto il testo all'interno dei tag della funzione dei baffi) e una funzione che renderà i tag del modello all'interno del testo. Quindi, qualunque sia la funzione restituita, verrà inserita nei tag. Potete vederlo al lavoro nel gli URL funzione nei dati di cui sopra.
È molto semplice eseguire il rendering dell'HTML:
html = Moustache.to_html (modello, dati);
Quindi, puoi attaccare quell'HTML ovunque tu voglia.
var data, template, html; data = name: "Some Tuts + Sites", sites: ["Netsuts +", "Psdtuts +", "Mobiletuts +"], url: function () return function (text, render) text = render (testo); var url = text.trim (). toLowerCase (). split ('tuts +') [0] + '.tutsplus.com'; return '' + text + ''; ; template = " nome
Per saperne di più su Moustache, controlla il sito web. Divertiti con esso!
