Share
In questo tutorial, daremo un'occhiata al modo in cui il sistema di beta templating di jQuery può essere utilizzato in modo eccellente per disaccoppiare completamente il nostro codice HTML dai nostri script. Daremo anche una rapida occhiata al modulo AJAX completamente rinnovato di jQuery 1.5.
Il templating è un newish (è ancora in beta, quindi è probabile che cambi leggermente mentre matura e migra nel core, ma è stato intorno per la parte migliore di un anno), funzionalità jQuery estremamente potente che ci permette di specificare un template da usare quando si costruiscono strutture DOM tramite script, qualcosa che sono sicuro che tutti facciamo quasi ogni giorno.
È sempre stato incredibilmente facile usare jQuery per fare qualcosa del genere:
Accentsconagua
$ ("# someElement"). children (). each (function () $ (this) .wrap ($ (""));); Il templating ci consente di rimuovere questi frammenti di codice HTML basati su stringhe dal nostro comportamento.
Questo semplicemente avvolgerà ogni elemento figlio di Il templating ci consente di rimuovere questi frammenti di codice HTML basati su stringhe dal nostro livello di comportamento e di rimetterli saldamente al loro posto nel livello di contenuto. Mentre lo facciamo, possiamo anche dare un'occhiata a una delle nuovissime e straordinarie funzionalità AJAX di jQuery 1.5: oggetti posticipati. In questo esempio, costruiremo un widget di Twitter che non solo caricherà alcuni dei nostri tweet recenti, ma anche alcuni amici, follower e suggerimenti. Ho scelto Twitter per questo esempio perché emette JSON nel formato richiesto; è facile e divertente. Quindi iniziamo; il widget stesso verrà creato dal seguente markup sottostante: Stiamo usando HTML5 e abbiamo incluso il semplificato Questo widget verrebbe probabilmente inserito in una barra laterale ed essere distinto dal contenuto effettivo della pagina in cui è presente, ma correlato al sito nel suo complesso. Con questo in mente, sento un Continuando con il nostro markup, abbiamo alcuni dettagli sull'utente di Twitter i cui tweet sono elencati, incluso il nome in a Successivamente, abbiamo le schede che verranno utilizzate per passare da tweet, amici e follower. Questi sono costruiti da una semplice collezione di Si noti che stiamo anche utilizzando un plug-in: questo è il Infine, abbiamo gli elementi che terranno ogni flusso di dati; abbiamo un contenitore esterno con un Prendi una copia adesso e incollala nella stessa cartella della pagina web appena creata. Ho menzionato un foglio di stile personalizzato in precedenza; aggiungiamolo adesso; in un nuovo file nel tuo editor di testo aggiungi il seguente codice: Salva questo file come Mettiamo insieme lo script di base e facciamo funzionare quelle schede. In un altro nuovo file nel tuo editor di testo, aggiungi il seguente codice: Salva questo file come Dovremo selezionare gli elementi ripetutamente in tutto il codice; quindi memorizzare nella cache un riferimento al contenitore esterno aiuta a minimizzare il numero di oggetti jQuery che dobbiamo creare. Quindi impostiamo un gestore di clic per i collegamenti a schede che ottengono il Ora inizia il vero divertimento; possiamo fare le richieste a Twitter per ottenere i nostri tre set di dati e utilizzare il plug-in di template di jQuery per creare gli elementi DOM richiesti utilizzando i dati che otteniamo dalle richieste. Prima otterremo i dati e quindi aggiungeremo i modelli. Dopo il click-handler per i collegamenti degli strumenti, aggiungi il seguente codice: Per prima cosa, usiamo jQuery Quindi definiamo tre funzioni standard; all'interno di ogni funzione usiamo jQuery Per garantire che i dati siano archiviati nel formato corretto per JSON utilizziamo la notazione a parentesi quadre. Non abbiamo bisogno di tanti dati, quindi in ciascuno Il Le funzioni per recuperare gli amici e gli elenchi dei follower sono praticamente identiche. Di nuovo, rinominiamo le proprietà con cui lavoreremo quando costruiamo i nostri oggetti e li memorizziamo in ogni array. Tutti e tre i nostri gestori di successo archiviano gli array di 5 elementi risultanti in Si noti che non invochiamo ognuno dei nostri Il Una volta restituite tutte le funzioni, l'oggetto posticipato viene risolto e tutte le funzioni registrate con Questo è incredibile; vogliamo fare tutte e tre le richieste, ma non abbiamo modo di sapere in anticipo quale di questi verrà restituito per ultimo, quindi è impossibile utilizzare la funzione di callback di una sola richiesta se vogliamo elaborare i dati restituiti da tutte le funzioni al contemporaneamente. In passato, probabilmente avremmo dovuto impostare un intervallo che ripetutamente interrogava ogni funzione per verificare se fosse ritornata, e attendere fino a quando tutti avevano prima di procedere. Ora possiamo delegare tutto questo tracciamento manuale a jQuery per gestire automaticamente per noi. Usiamo due funzioni di utilità in questo esempio: Il Successivamente creiamo alcune variabili; impostiamo un array contenente nomi di giorni abbreviati, con domenica (o sole) come primo elemento dell'array. I giorni nelle date JavaScript sono a base zero, con domenica che appare sempre come giorno 0. Creiamo quindi a Data oggetto usando il Creiamo quindi un altro array contenente tre elementi: il primo elemento ottiene il giorno della settimana corretto dal primo array che abbiamo creato all'interno di questa funzione, l'elemento successivo ottiene la data localizzata e l'ultimo elemento ottiene l'ora localizzata. Infine, restituiamo il contenuto dell'array dopo che ci siamo uniti. Potremmo semplicemente usare la concatenazione di stringhe per costruire questa stringa di data, ma unire gli elementi dell'array è molto più veloce della costruzione manuale delle stringhe. Il Quindi testiamo il testo per vedere se contiene nomi utente; se lo fa, dividiamo la stringa di testo su ogni occorrenza di un nome utente. Questo ci darà un array che contiene elementi che sono sia in testo normale, sia un nome utente. Quindi passiamo in rassegna ogni elemento di questo array e controlliamo se ciascun elemento contiene il Questo è tutto; una volta memorizzati i nostri oggetti, la funzione restituisce il nuovo Ora che abbiamo i dati JSON elaborati, possiamo passare alla parte finale dell'esempio: templating. Nella funzione anonima passata al Questo codice applica semplicemente i modelli utilizzando il metodo del plugin di template jQuery Tornare all'HTML e aggiungere prima quanto segue I modelli jQuery vengono aggiunti alla pagina HTML utilizzando Questo modello è molto più semplice in quanto non utilizziamo modelli nidificati o facciamo alcuna iterazione, stiamo semplicemente inserendo i dati da ciascun array JSON utilizzando il Ora che abbiamo applicato i modelli e popolato il nostro widget, possiamo aggiungere alcuni altri stili CSS per riordinare i nuovi elementi che sono stati aggiunti; in tweetbox.css aggiungi il seguente codice alla fine del file: Salva il file, la nostra pagina dovrebbe ora apparire come segue: C'è ancora una cosa che dovremmo probabilmente fare: al momento, la nostra funzione di formattazione di tweet non funziona in IE a causa di come IE tratta il Questo dovrebbe essere aggiunto direttamente prima del riferimento dello script al nostro In questo tutorial abbiamo esaminato alcune delle funzionalità più avanzate del template jQuery, come l'iterazione degli oggetti con Un punto chiave è che il nuovo sistema di template di jQuery ci consente di separare meglio i nostri livelli di comportamento e presentazione, spostando tutti gli snippet HTML dal Alcuni potrebbero obiettare che ora abbiamo solo la situazione opposta e semplicemente ne abbiamo di più Tuttavia, penso che questo sia infinitamente preferibile all'alternativa. Elementi nel formato Abbiamo anche guardato il nuovo eccellente Grazie mille per la lettura e fammi sapere se hai qualche domanda!#someElement in un nuovo
Iniziare
DOCTYPE e meta set elemento. Ci colleghiamo a un foglio di stile personalizzato, che creeremo in un momento, e per supportare le versioni correnti di IE8 e precedenti, utilizziamo un commento condizionale per collegarci a Google ospitato html5shiv file. utilizzando
a parte è un contenitore esterno appropriato in questo caso. Diamo un id per una facile selezione e styling., un'immagine e la bio in uno standard . Sentiti libero di cambiarli con i tuoi dettagli personali quando ricostruisci l'esempio. Potremmo ottenere tutti questi elementi dalla chiamata JSON che faremo quando chiediamo i dati, tuttavia, se c'è un leggero ritardo nella richiesta al caricamento della pagina, il visitatore potrebbe rimanere con una serie di caselle vuote, così hard-coding queste informazioni nel widget è di nuovo, appropriato. Se stessimo creando un plug-in per gli altri sviluppatori, non potremmo certamente farlo, ma quando aggiungiamo questo al nostro sito o al sito di un cliente specifico, questo è un approccio fattibile. e elementi. La scheda amici verrà visualizzata per impostazione predefinita, quindi il link per questa scheda ha la classe sopra collegato ad esso. In un progetto più ampio, potremmo ovviamente utilizzare le schede dell'interfaccia utente di jQuery, ma non volevo che il tutorial perdesse l'attenzione e non ci preoccupiamo di aggiungere manualmente questa funzionalità.tmpl (template) plugin, che ci dà la possibilità di usare template jQuery. id di alimentazione, e tre contenitori rispettivamente per i tweet, gli amici e i follower, che hanno anche id attributi per una facile selezione. Includiamo anche a elemento per i visitatori che potrebbero avere script disabilitati (se ne esiste effettivamente qualcuno), che si trova nell'area di contenuto della scheda predefinita. Si noti che stiamo anche utilizzando un plug-in: questo è il tmpl (template) plugin, che ci dà la possibilità di usare template jQuery. Questo file può essere scaricato da qui#tweetbox display: block; larghezza: 300px; padding: 10px; border: 1px solid #aaa; -moz-border-radius: 5px; border-radius: 5px; famiglia di font: "Trebuchet MS", Arial, Helvetica, sans-serif; background-color: #eee; #tweetbox img display: block; #user margin-bottom: 10px; float: sinistra; #user h2 margin: 0 0 10px 0; position: relative; font-size: 18px; #user img float: left; #user p width: 230px; margin: 0; position: relative; float: sinistra; font-size: 10px; color: # 333; #user img display: block; margin-right: 10px; border: 3px solid # 333; #tools margin: 0; * Margin-bottom: -10px; padding: 0; clear: both; list-style-type: none; #tools li float: left; #tools a display: block; altezza: 20px; imbottitura: 3px 24px; border: 1px solid #aaa; border-bottom: none; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; margin-right: -1px; position: relative; font-size: 14px; delineare: none; background-color: # d6d6d6; background-image: -webkit-gradient (lineare, sinistra in alto, in basso a sinistra, color-stop (0.5, # E8E8E8), color-stop (0, #DBDBDB), color-stop (0.5, # D6D6D6)); background-image: -moz-linear-gradient (centro in alto, # E8E8E8 50%, #DBDBDB 0%, # D6D6D6 50%); a text-decoration: none; color: # 333; #tools .on height: 21px; margin-top: -1px; top: 1px; #feed width: 298px; border: 1px solid #aaa; clear: both; background-color: # d6d6d6; #feed> div display: none; noscript display: block; padding: 10px; font-size: 13px; color: # 333;
tweetbox.css nella stessa directory della pagina HTML. Questo è solo un po 'di stile di layout per il nostro widget. Ci sono un paio di sottigliezze CSS3 per browser capaci: alcune azioni con angoli arrotondati (notiamo che non abbiamo più bisogno del -webkit- prefisso del fornitore per gli angoli arrotondati nei browser Webkit più recenti!) e alcuni gradienti per le schede. Un punto da notare è che nascondiamo tutti i contenitori all'interno dell'elemento feed, ad eccezione di quello con la classe attivo. A questo punto (e con JS disabilitato) il widget dovrebbe apparire così:
Aggiungere lo script
(function ($) // tabs var tweetbox = $ ("# tweetbox"), tweetData = null, friendData = null, followData = null; tweetbox.find ("# tools a"). click (function (e) e.preventDefault (); var link = $ (this), target = link.attr ("href"). split ("#") [1]; tweetbox.find (". on"). removeClass ("on" ); link.addClass ("on"); tweetbox.find ("# feed> div"). hide (); tweetbox.find ("#" + target) .show (););) (jQuery) ; tweetbox.js nella stessa directory della pagina HTML. È tutto molto semplice e, dato che non è l'obiettivo principale di questo tutorial, non lo affronterò troppo. Tutto ciò che facciamo è un alias del carattere stringa all'interno di una funzione anonima, che eseguiamo immediatamente - più per la buona pratica della pura necessità in questo esempio - e quindi memorizza nella cache un selettore per il contenitore esterno principale per il widget. Inizializziamo anche tre variabili da utilizzare in seguito e impostiamo i loro valori su nullo.id della scheda da mostrare da href del collegamento su cui è stato fatto clic, rimuove il nome della classe sopra dai collegamenti della scheda e quindi lo aggiunge al collegamento su cui è stato fatto clic. Nascondiamo quindi tutti i pannelli delle schede, prima di mostrare il pannello delle schede selezionato.
Ottenere i dati
$ .ajaxSetup (dataType: "jsonp"); function getTweets () $ .ajax ("http://api.twitter.com/statuses/user_timeline/danwellman.json", success: function (data) var arr = []; for (var x = 0; X < 5; x++) var dataItem = ; dataItem["tweetlink"] = data[x].id_str; dataItem["timestamp"] = convertDate(data, x); dataItem["text"] = breakTweet(data, x); arr.push(dataItem); tweetData = arr; ); function getFriends() return $.ajax("http://api.twitter.com/1/statuses/friends/danwellman.json", dataType: "jsonp", success: function(data) var arr = []; for (var x = 0; x < 5; x++) var dataItem = ; dataItem["screenname"] = data[x].screen_name; dataItem["img"] = data[x].profile_image_url; dataItem["name"] = data[x].name; dataItem["desc"] = data[x].description; arr.push(dataItem); friendData = arr; ); function getFollows() return $.ajax("http://api.twitter.com/1/statuses/followers/danwellman.json", dataType: "jsonp", success: function(data) var arr = []; for (var x = 0; x < 5; x++) var dataItem = ; dataItem["screenname"] = data[x].screen_name; dataItem["img"] = data[x].profile_image_url; dataItem["name"] = data[x].name; dataItem["desc"] = data[x].description; arr.push(dataItem); followData = arr; ); //execute once all requests complete $.when(getTweets(), getFriends(), getFollows()).then(function() //apply templates ); ajaxSetup () metodo per impostare il tipo di dati opzione a jsonp per tutte le richieste successive. Poiché questo sarà il tipo di dati utilizzato da ciascuna delle nostre richieste, ha senso impostare l'opzione una sola volta.ajax () metodo per fare una richiesta al servizio web che restituisce ogni insieme di dati con cui lavoreremo, il user_timeline, amici e seguaci rispettivamente. Nell'oggetto impostazioni per ogni richiesta, definiamo a successo gestore che verrà eseguito una volta che ogni singola richiesta ritorna correttamente. Ognuna di queste richieste restituirà un oggetto JSON che potenzialmente contiene fino a 100 oggetti pieni di dati Twitter.successo gestore creiamo un nuovo array, che a sua volta conterrà una serie di oggetti che contengono solo i dati che effettivamente useremo. Per garantire che i dati siano archiviati nel formato corretto per JSON, dove ogni nome di proprietà deve essere una stringa, usiamo la notazione a parentesi quadra per impostare i nomi delle proprietà in formato stringa.user_timeline richiesta memorizza il stringa di identificazione del tweet che può essere usato come parte di un URL che punta al tweet, oltre a memorizzare il risultato di due funzioni di utilità. La prima di queste funzioni crea una stringa di dati formattata che converte la data restituita da Twitter in qualcosa che è un po 'più carina e localizzata sulla macchina del visualizzatore. Formiamo anche il testo dei tweet in modo da poterli potenziare @nomi utente trovato nel testo A breve esamineremo sia la data che le funzioni di formattazione di tweet.nullo variabili che impostiamo all'inizio dello script.getTweets (), GetFriends () e getFollowers () funzioni manualmente. Invece, usiamo il nuovo di jQuery quando() metodo per invocarli tutti allo stesso tempo. Questo metodo gestirà completamente l'esecuzione di queste funzioni e terrà traccia di quando ciascuna di esse è stata restituita. Noi concateniamo il poi() metodo dopo il quando() metodo. Una volta che tutte le funzioni specificate sono state restituite correttamente, la funzione di callback viene passata a poi() il metodo sarà eseguito.
quando() metodo crea un oggetto posticipato che gestisce le funzioni che specifichiamo come argomenti. poi() sono chiamati. Altri gestori possono anche essere incatenati al quando() oggetto differito, come fallire(), che verrebbe eseguito se una o più delle funzioni passate all'oggetto posticipato non sono riuscite.
Funzioni di utilità
convertDate () e breakTweet (). Il codice per queste funzioni è il seguente:// format date convertDate = function (obj, i) // elimina l'offset del fuso orario in IE if (window.ActiveXObject) obj [i] .created_at = obj [i] .created_at.replace (/ [+] \ d 4 /, ""); // bella data nelle impostazioni internazionali del sistema var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], date = new Date (obj [i] .created_at), formattedTimeStampArray = [days [obj [i] .created_at], date.toLocaleDateString (), date.toLocaleTimeString ()]; return formattedTimeStampArray.join (""); // format text breakTweet = function (obj, i) // atify var text = obj [i] .text, brokenTweet = [], atExpr = / (@ [\ w] +) /; if (text.match (atExpr)) var splitTweet = text.split (atExpr); per (var x = 0, y = splitTweet.length; x < y; x++) var tmpObj = ; if (splitTweet[x].indexOf("@") != -1) tmpObj["Name"] = splitTweet[x]; else tmpObj["Text"] = splitTweet[x]; brokenTweet.push(tmpObj); else var tmpObj = ; tmpObj["Text"] = text; brokenTweet.push(tmpObj); return brokenTweet; convertDate () la funzione è relativamente semplice: per prima cosa controlliamo se il browser in uso è una variante di IE cercando window.ActiveXObject. Se questo è trovato, usiamo il JavaScript sostituire() metodo per rimuovere il Timezone Offset fornito come parte della stringa contenuta all'interno del created_at proprietà dell'oggetto JSON restituito da Twitter. Questo metodo richiede il modello di espressioni regolari da cercare e una stringa vuota con cui sostituirlo. Questo impedisce a IE di soffocare sul + carattere quando la stringa viene passata al nuova data costruttore.nuova data () costruttore e passare la stringa di data memorizzata nel file created_at proprietà dell'oggetto che abbiamo passato alla funzione.breakTweet () la funzione è leggermente più complessa. Quello che dobbiamo fare è convertire il testo normale in un array JSON in cui ogni elemento dell'array è un oggetto che contiene uno Nome o Testo proprietà in modo che possiamo usare i dati con un modello (più sui modelli successivi). Per prima cosa memorizziamo il testo dall'oggetto restituito da Twitter (che passiamo alla funzione). Creiamo anche una matrice vuota per memorizzare gli oggetti e definire l'espressione regolare che corrisponderà @nomi utente.@ simbolo; se lo fa, sappiamo che è un nome utente e quindi memorizzarlo in un oggetto con la chiave Nome. Se non contiene il @ simbolo lo salviamo con la chiave Testo. L'oggetto viene quindi inserito nell'array. Inoltre, se l'intero testo non contiene un @ personaggio lo memorizziamo con la chiave Testo.brokenTweet matrice al user_timeline funzione di successo e viene memorizzata nell'oggetto JSON principale per l'uso con i nostri modelli. Oltre a potenziare il testo, potremmo anche collegare e fare l'hashify se lo volessimo. Lo lascerò a te per implementarlo.
templating
poi() metodo nell'ultima sezione del codice, c'era un commento e nient'altro. Subito dopo questo commento, aggiungi il seguente codice:// applica template tweetbox.find ("# tweetTemplate"). tmpl (tweetData) .appendTo ("# tweetList"); tweetbox.find ( "# ffTemplate") tmpl (friendData) .appendTo ( "# FriendList."); tweetbox.find ( "# ffTemplate") tmpl (followData) .appendTo ( "# followList."); // mostra tweet tweetbox.find ("# tweets"). show (); tmpl (). Il metodo accetta il JSON che contiene i dati che verranno utilizzati dal modello. Specifichiamo quindi dove nel documento inserire gli elementi del modello. Ogni set di modelli aggiunge gli elementi al rispettivo contenitore vuoto all'interno del widget. Il tmpl () il metodo è chiamato su tre elementi, ma questi elementi non esistono ancora. Li aggiungeremo dopo.
Aggiunta dei modelli jQuery
$ Dati formato dell'elemento del modello.
Finendo
#feed ul padding: 0; margin: 0; #feed li padding: 0; border-bottom: 1px solid #aaa; list-style-type: none; font-size: 11px; #feed li: last-child, #feed li: last-child p border-bottom: none; #feed p padding: 10px; margin: 0; border-bottom: 1px solid #eee; background-image: -webkit-gradient (lineare, a sinistra in basso, a sinistra in alto, color-stop (0.48, # c2c2c2), color-stop (0.71, # d6d6d6)); background-image: -moz-linear-gradient (centro in basso, # c2c2c2 48%, # d6d6d6 71%); #feed p: after content: ""; blocco di visualizzazione; width: 100%; altezza: 0; clear: both; .tweet-link display: block; margin-top: 5px; color: # 777; .img-link display: block; margine: 4px 10px 0 0; float: sinistra; #feed .nomeutente a dimensione carattere: 14px; font-weight: bold; #feed .bio display: block; margin-top: 10px;
Diviso() metodo di espressione regolare. Per risolvere questo problema, possiamo utilizzare un'eccellente patch JavaScript creata da Steven Levithan. Può essere scaricato da: http://blog.stevenlevithan.com/archives/cross-browser-split e può essere incluso nella pagina usando un commento condizionale nello stesso modo in cui abbiamo aggiunto il html5shiv file:tweetbox.js file.
Sommario
ogni e condizionali con Se e altro.
.js file e torna nel .html file. >$ ("quando() metodo fornito in jQuery 1.5, che ci consente di gestire un insieme di richieste asincrone ed eseguire codice una volta che tutti hanno completato. Ciò comporta l'utilizzo del poi() metodo per specificare una funzione da eseguire una volta restituite tutte le funzioni asincrone.
