Share
În acest tutorial, vom analiza modul în care sistemul de template-uri beta al jQuery poate fi folosit cu excelență pentru a decupla complet codul HTML de la scenariile noastre. De asemenea, vom analiza rapid modulul AJAX complet modernizat al jQuery 1.5.
Templating este un newish (este încă în beta, deci este probabil să se schimbe ușor în timp ce se maturizează și migrează în nucleu, dar a fost în jur de o parte a anului), o caracteristică jQuery extrem de puternică, care ne permite să specificăm un șablon de utilizat când clădesc structurile DOM prin scenariu, ceva care sunt sigur că noi toți facem aproape zilnic.
Este întotdeauna incredibil de ușor atunci când utilizați jQuery pentru a face ceva de genul:
Accentsconagua
$ ("# someElement") copii () fiecare (funcția () $ (this) .wrap ($ (""));); Templating-ul ne permite să eliminăm aceste fragmente de cod HTML din comportamentul nostru.
Acest lucru va pur și simplu înfășura fiecare element copil de Templitarea ne permite să eliminăm fragmentele HTML de pe șir din stratul nostru de comportament și să le întoarcem ferm acolo unde aparțin în stratul de conținut. În timp ce facem acest lucru, putem, de asemenea, să verificăm una dintre noile caracteristici AJAX super-cool ale obiectelor jQuery 1.5 - amânate. În acest exemplu, vom construi un widget Twitter care nu numai că va încărca câteva dintre tweeturile noastre recente, ci și lista câtorva prieteni, adepți și sugestii. Am ales Twitter pentru acest exemplu, deoarece transmite JSON în formatul dorit; este ușor și distractiv. Deci sa începem; widgetul propriu-zis va fi construit din următoarea marjă de bază: Folosim HTML5 și am inclus modelul simplificat Acest widget ar fi probabil să intre într-o bară laterală și să fie diferit de conținutul real al paginii pe care este prezentat, dar care are legătură cu site-ul în ansamblu. În acest sens, mă simt un lucru Continuând pe marcajul nostru, avem câteva detalii despre utilizatorul Twitter al cărui tweet-uri sunt listate, inclusiv numele dintr-un Apoi, avem filele care vor fi utilizate pentru a comuta între tweets, prieteni și adepți. Acestea sunt construite dintr-o colecție simplă de Observați că folosim și un plugin - acesta este În cele din urmă, avem elementele care vor susține fiecare flux de date; avem un container exterior cu un Luați o copie acum și o lipiți în același folder ca și pagina web pe care tocmai am creat-o. Am menționat o foaie de stil personalizată mai devreme; să adăugăm asta chiar acum; într-un fișier nou în editorul dvs. de text adăugați următorul cod: Salvați acest fișier ca Să punem scenariul de bază împreună și să obținem acele tabele de lucru. Într-un alt fișier nou din editorul de text, adăugați următorul cod: Salvați acest fișier ca Va trebui să selectăm elemente în mod repetat pe tot codul; așa că cachearea unei trimiteri la containerul exterior ajută la minimizarea numărului de obiecte jQuery pe care trebuie să le creăm. Apoi am setat un handler de clic pentru link-urile de file care primesc Acum începe adevărata distracție; putem face cererile pentru Twitter să obțină cele trei seturi de date și să folosim pluginul templating al lui jQuery pentru a crea elementele DOM necesare utilizând datele pe care le obținem din cereri. Vom primi mai întâi datele și apoi vom adăuga șabloanele. După ce clic-handler pentru link-uri instrument, adăugați următorul cod: În primul rând, folosim jQuery Apoi definim trei funcții standard; în cadrul fiecărei funcții folosim jQuery Pentru a ne asigura că datele sunt stocate în formatul corect pentru JSON, folosim notația cu patrate. Nu avem nevoie de atât de multe date, deci în fiecare Funcțiile de recuperare a listelor de prieteni și de adepți sunt aproape identice. Din nou, redenumiți proprietățile cu care vom lucra când construim obiectele și le stocăm în fiecare matrice. Toți cei trei agenți de procesare a succesului stochează matricele rezultate în 5 elemente Observați că nu invocăm pe fiecare dintre noi Odată ce toate funcțiile au revenit, obiectul amânat este rezolvat și toate funcțiile înregistrate cu Asta este incredibil; dorim să facem toate cele trei cereri, dar nu avem cum să știm dinainte care dintre acestea vor fi returnate ultima dată, deci este imposibil să folosim funcția de apel invers a unei singure solicitări dacă dorim să procesăm datele returnate din toate funcțiile de la acelasi timp. În trecut, probabil că ar fi trebuit să stabilim un interval care să intercepteze în mod repetat fiecare funcție pentru a verifica dacă sa întors și a aștepta până când toți au avut înainte de a continua. Acum putem delega toate aceste urmăriri manual la jQuery pentru a ne ocupa automat de noi. Utilizăm două funcții utilitare în acest exemplu: Apoi vom crea câteva variabile; am stabilit o matrice care conține nume de zile scurte, cu duminică (sau Sun) ca primul element din matrice. Zilele din datele JavaScript sunt bazate pe zero, duminica apare întotdeauna ca ziua 0. Apoi creăm un Data obiect folosind Apoi vom crea o altă matrice care conține trei elemente: primul element primește ziua potrivită a săptămânii din prima matrice creată în cadrul acestei funcții, următorul element primește data localizată, iar ultimul element primește timpul localizat. În cele din urmă, vom returna conținutul matricei după ce ne-am alăturat. Am putea pur și simplu să folosim concatenarea șirului pentru a construi acest șir de date, dar îmbinarea elementelor de matrice este mult mai rapidă decât construirea șirurilor manual. Apoi testăm textul pentru a vedea dacă acesta conține nume de utilizator; dacă ne împărțim apoi șirul de text pentru fiecare apariție a unui nume de utilizator. Acest lucru ne va da o matrice care conține elemente care sunt fie text simplu, fie un nume de utilizator. Apoi, trecem prin fiecare element din această matrice și verificăm dacă fiecare element conține Asta e; odată ce am stocat obiectele, funcția returnează noul Acum, când avem datele noastre JSON procesate, putem trece la partea finală a exemplului: templating. În funcția anonimă trecută la Acest cod aplică pur și simplu șabloanele folosind metoda plugin templating jQuery Reveniți la codul HTML și adăugați mai întâi următoarele șabloanele jQuery sunt adăugate la pagina HTML utilizând Acest șablon este mult mai simplu, deoarece nu folosim șabloane imbricate sau nu facem nicio iterație, pur și simplu inserăm datele din fiecare matrice JSON utilizând Acum, când am aplicat șabloanele și ne-am populat widget-ul, putem adăuga câteva stiluri CSS pentru a ordona elementele noi care au fost adăugate; în tweetbox.css adăugați următorul cod la sfârșitul fișierului: Salvați fișierul, pagina noastră ar trebui să apară acum după cum urmează: Mai este încă un lucru pe care ar trebui să-l facem: în prezent, funcția de formatare tweet nu funcționează în IE din cauza modului în care IE tratează Acest lucru trebuie adăugat direct înainte de referința scriptului la adresa noastră În acest tutorial am analizat unele dintre cele mai avansate caracteristici ale template-ului jQuery, cum ar fi iterația itemului cu Un punct cheie este că noul sistem de template-uri de la jQuery ne permite să ne separăm mai bine straturile de comportament și de prezentare, mutând toate fragmentele HTML din Unii ar putea argumenta că acum avem doar situația opusă și pur și simplu avem mai multe Cu toate acestea, cred că acest lucru este infinit de preferat față de alternativă. Elemente în format De asemenea, ne-am uitat la noul excelent Vă mulțumesc foarte mult că ați citit și spuneți-mi dacă aveți întrebări!#someElement într-un nou
Noțiuni de bază
DOCTYPE și meta charset element. Conectăm la o foaie de stil personalizată, pe care o vom crea într-un moment, iar pentru a susține versiunile actuale ale versiunilor IE8 și mai mici, vom folosi un comentariu condiționat pentru a conecta la găzduit de Google html5shiv fişier. Utilizarea
deoparte este un recipient exterior adecvat în acest caz. Îi dăm un id pentru selectarea și styling-ul ușor., o imagine și bio într-un standard . Simțiți-vă liber să le schimbați la propriile detalii atunci când reconstruiți exemplul. Am putea obține toate aceste elemente din apelul JSON pe care îl vom face atunci când solicităm datele, cu toate acestea, dacă există o mică întârziere a solicitării la încărcarea paginii, vizitatorul ar putea fi lăsat să privească la o grămadă de cutii goale, atât de greu de codat aceste informații în widget-ul este din nou, potrivit. Dacă făceam un plugin pentru a consuma alți dezvoltatori, cu siguranță nu am putut face acest lucru, dar atunci când adăugăm acest lucru site-ului nostru sau site-ul unui client specific, aceasta este o abordare fezabilă. și elemente. Fila de prieteni va fi afișată în mod implicit, astfel încât linkul pentru această filă are clasa pe atașat la acesta. Într-un proiect mai amplu, am putea, desigur, să folosim tab-urile jQuery UI, dar nu am vrut ca tutorialul să-și piardă concentrarea și nu este deranjat să adăugăm manual această funcționalitate.tmpl (templating), care ne oferă posibilitatea de a utiliza șabloanele jQuery. id de a hrani, și trei containere pentru tweets, prieteni și respectiv adepți, care au de asemenea id atribute pentru selectarea ușoară. De asemenea, includem o element pentru vizitatorii care au dezactivat scripting-ul (dacă există vreunul), care se află în zona implicită a filelor. Observați că folosim și un plugin - acesta este tmpl (templating), care ne oferă posibilitatea de a utiliza șabloanele jQuery. Acest fișier poate fi descărcat de aici#tweetbox display: block; lățime: 300px; padding: 10px; frontieră: 1px solid #aaa; -moz-border-radius: 5px; border-radius: 5px; font-familie: "Trebuchet MS", Arial, Helvetica, sans-serif; culoare de fundal: #eee; #tweetbox img afișare: bloc; #user marginea-jos: 10px; plutește la stânga; #user h2 margine: 0 0 10px 0; Poziția: relativă; font-size: 18px; #user img float: stânga; #user p lățime: 230px; margin: 0; Poziția: relativă; plutește la stânga; font-size: 10px; Culoare: # 333; #user img afișare: bloc; marja de-dreapta: 10px; frontieră: 3px solid # 333; #tools margin: 0; * Margin-bottom: -10px; padding: 0; clar: ambele; list-style-type: none; #tools li float: left; #tools a display: bloc; înălțime: 20px; padding: 3px 24px; frontieră: 1px solid #aaa; border-bottom: nici unul; -moz-border-radius: 5px 5px 0 0; raza de graniță: 5px 5px 0 0; marja de-dreapta: -1px; Poziția: relativă; font-size: 14px; schiță: nici una; background-color: # d6d6d6; fundal-imagine: -webkit-gradient (liniar, stânga sus, jos stânga, stop color (0,5, # E8E8E8), oprire color (0, #DBDBDB), oprire color (0,5, # D6D6D6); fundal-imagine: -moz-linear-gradient (centru, # E8E8E8 50%, #DBDBDB 0%, # D6D6D6 50%); a text-decoration: none; Culoare: # 333; #tools .on height: 21px; margin-top: -1px; sus: 1px; #feed width: 298px; frontieră: 1px solid #aaa; clar: ambele; background-color: # d6d6d6; #feed> div afișare: niciunul; noscript display: bloc; padding: 10px; font-size: 13px; Culoare: # 333;
tweetbox.css în același director ca și pagina HTML. Acesta este doar un pic de aspect de aspect pentru widget-ul nostru. Există câteva zicatori CSS3 pentru browserele capabile: unele acțiuni rotunjite (nu mai avem nevoie de -WebKit- prefixul vânzătorului pentru colțurile rotunjite în cele mai recente browsere webkit!) și unele gradienți pentru file. Un punct de reținut este faptul că ascundem toate containerele din elementul de alimentare, cu excepția celui cu clasa activ. În acest moment (și cu JS dezactivat) widgetul ar trebui să arate astfel:
Adăugarea scriptului
(funcția ($) // tabs var tweetbox = $ ("# tweetbox"), tweetData = null, friendData = null, followData = null; tweetbox.find e.preventDefault (); var link = $ (acest), target = link.attr ("href"). );));) (jQuery); link.addClass ("on"); tweetbox.find ("# feed> div" ; tweetbox.js în același director ca și pagina HTML. Totul este destul de drept și, deoarece nu este cu adevărat principalul obiectiv al acestui tutorial, nu voi intra prea mult în el. Tot ceea ce facem este alias caracterul de șir într-o funcție anonimă pe care o executăm imediat - mai mult pentru o bună practică decât o necesitate absolută în acest exemplu - și apoi cache un selector pentru containerul principal exterior pentru widget. De asemenea, inițiază trei variabile pentru utilizare ulterioară și le stabilesc valorile nul.id din fila pentru a afișa de la href a link-ului la care a fost făcut clic, elimină numele clasei pe din link-urile filelor și apoi o adaugă înapoi la link-ul pe care a fost făcut clic. Apoi ascundem toate panourile tab-ului, înainte de a afișa panoul selectat.
Obținerea datelor
$ .ajaxSetup (dataType: "jsonp"); funcția getTweets () $ .ajax ("http://api.twitter.com/statuses/user_timeline/danwellman.json", succes: funcția (data) var arr = []; pentru (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 () metoda de a seta dataType opțiunea pentru JSONP pentru toate solicitările ulterioare. Cum va fi aceasta dataType folosit de fiecare dintre cererile noastre, este logic să setați o singură opțiune.ajax () metoda de a face o cerere către serviciul web care returnează fiecare set de date cu care vom lucra, user_timeline, prieteni și adepți respectiv. În obiectul de setări pentru fiecare solicitare, definim a succes handler care va fi executată odată ce fiecare solicitare individuală revine cu succes. Fiecare dintre aceste cereri va returna un obiect JSON care poate conține până la 100 de obiecte pline de date Twitter.succes manipulator vom crea o nouă matrice, care, la rândul său, va conține o serie de obiecte care dețin doar datele pe care le vom folosi de fapt. Pentru a vă asigura că datele sunt stocate în formatul corect pentru JSON, unde fiecare nume de proprietate trebuie să fie un șir, folosim notația cu braț pătrate pentru a seta numele proprietăților în format de șir.user_timeline cererea stochează id șir din tweet-ul care poate fi folosit ca parte a unei adrese URL care indică mesajul tweet, precum și stocarea rezultatului a două funcții utilitare. Prima dintre aceste funcții creează un șir de date formatat care convertește data returnată de Twitter în ceva puțin mai frumos și localizat în mașina vizualizatorului. De asemenea, formatul textului tweet este formatat astfel încât să putem atifica orice @numeutilizator găsite în text. Ne vom uita atât la funcțiile de formatare, cât și la date, în scurt timp.nul variabile pe care le-am stabilit în partea de sus a scenariului.getTweets (), getFriends () și getFollowers () funcții manual. În schimb, folosim noul jQuery cand() pentru a le invoca pe toate în același timp. Această metodă se va ocupa complet de funcționarea acestor funcții și va urmări momentul în care fiecare dintre ei a revenit. Noi lanțem atunci() după metoda cand() metodă. Odată ce toate funcțiile specificate s-au întors cu succes, funcția de apel inversă trecem la atunci() metoda va fi executată.
cand() metoda creează un obiect amânat care gestionează funcțiile pe care le specificăm ca argumente. atunci() sunt numite. Alți agenți de manipulare pot fi, de asemenea, înlănțuiți în cand() un obiect amânat, cum ar fi eșuează (), care ar fi executat dacă una sau mai multe dintre funcțiile transmise obiectului amânat nu au reușit.
Funcții utilitare
convertDate () și breakTweet (). Codul pentru aceste funcții este după cum urmează:// format date convertDate = functie (obj, i) // indepartarea fusului orar in IE daca (window.ActiveXObject) obj [i] .created_at = obj [i] .created_at.replace (/ [+] \ d 4 /, ""); // date destul de bune în sistemul locale var days = ["Sun", "Mon", "Tue", "Miercuri", "Thu", "Fri", " .created_at), formattedTimeStampArray = [zile [obj [i] .created_at], data.toLocaleDateString (), data.toLocaleTimeString ()]; retur formattedTimeStampArray.join (""); // format text breakTweet = functie (obj, i) // atita var text = obj [i] .text, brokenTweet = [], atExpr = / (@ [\ w] +) /; dacă (text.match (laExpr)) var splitTweet = text.split (laExpr); pentru (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 () funcția este relativ direct înainte: verificăm mai întâi dacă browserul în uz este o variantă a IE prin căutarea window.ActiveXObject. Dacă găsim acest lucru, vom folosi JavaScript a inlocui() - metoda de eliminare a Offsetului de fus orar furnizat ca parte a șirului conținut în creat la proprietatea obiectului JSON returnat de Twitter. Această metodă ia modelul de expresie regulată pentru a căuta, și un șir gol pentru al înlocui. Acest lucru oprește IE sufocare pe + caracter atunci când șirul este trecut la nouă dată constructor.data nouă () constructor, și treci în șirul de date stocat în creat la proprietatea obiectului pe care am trecut-o în funcție.breakTweet () funcția este puțin mai complexă. Ceea ce trebuie să facem este să convertim textul simplu într-o matrice JSON unde fiecare element de matrice este un obiect care conține fie a Nume sau Text astfel încât să putem utiliza datele cu un șablon (mai multe despre șabloanele următoare). Mai întâi stocăm textul din obiectul returnat de Twitter (pe care îl trecem în funcție). De asemenea, creăm o matrice goală pentru a stoca obiectele și pentru a defini expresia regulată care se va potrivi @numeutilizator.@ simbol; dacă se întâmplă, știm că este un nume de utilizator și astfel stocați-l într-un obiect cu cheia Nume. Dacă nu conține @ simbol îl salvăm cu cheia Text. Obiectul este apoi împins în matrice. De asemenea, dacă întregul text nu conține un text @ caracterul pe care îl stocăm cu cheia Text.brokenTweet array la user_timeline succes și este stocată în obiectul JSON principal pentru utilizarea cu șabloanele noastre. Pe lângă faptul că atificat textul, am putea, de asemenea, să ne aliniem și să ne compromită dacă vrem. O să-ți las asta pentru a le pune în aplicare.
templating
atunci() în ultima secțiune de cod, a existat un comentariu și nimic altceva. Imediat după acest comentariu, adăugați următorul cod:// aplicați șabloanele tweetbox.find ("# tweetTemplate"). tmpl (tweetData) .appendTo ("# tweetList"); tweetbox.find ( "# ffTemplate") tmpl (friendData) .appendTo ( "# friendList."); tweetbox.find ( "# ffTemplate") tmpl (followData) .appendTo ( "# followList."); // arată tweetbox tweetbox.find ("# tweets") show (); tmpl (). Metoda acceptă JSON care conține datele pe care șablonul le va utiliza. Apoi specificăm unde se introduc elementele șablonului în document. Fiecare set de șabloane adaugă elementele la respectivul container gol în widget. tmpl () metoda este chemată pe trei elemente, dar aceste elemente nu există încă. Vom adăuga următoarele.
Adăugarea șabloanelor jQuery
$ Date formatul elementului șablon.
Terminand
#feed ul padding: 0; margin: 0; #feed li padding: 0; frontieră-fund: 1px solid #aaa; list-style-type: none; font-size: 11px; #feed li: ultimul-copil, #feed li: ultimul copil p margin-bottom: nici unul; #feed p padding: 10px; margin: 0; frontieră-fund: 1px solid #eee; fundal-imagine: -webkit-gradient (linia, partea din stânga, partea stângă, stopul de culoare (0.48, # c2c2c2), oprirea culorilor (0.71, # d6d6d6); fundal-imagine: -moz-linear-gradient (fundul centrului, # c2c2c2 48%, # d6d6d6 71%); #feed p: după content: ""; display: block; lățime: 100%; înălțime: 0; clar: ambele; .tweet-link display: bloc; margin-top: 5px; Culoare: # 777; .img-link display: bloc; margine: 4px 10px 0 0; plutește la stânga; #feed .username un font-size: 14px; font-weight: bold; #feed .bio display: block; margin-top: 10px;
Despică() metoda expresiei regulate. Pentru a rezolva această problemă, putem folosi un patch excelent JavaScript creat de Steven Levithan. Acesta poate fi descărcat de la: http://blog.stevenlevithan.com/archives/cross-browser-split și poate fi inclus în pagină utilizând un comentariu condiționat în același mod în care am adăugat html5shiv fişier:tweetbox.js fişier.
rezumat
fiecare și condițiile cu dacă și Else.
.js fișier și înapoi în .html fişier. >$ (“cand() metoda oferită în jQuery 1.5, care ne permite să gestionăm un set de cereri asincrone și să executăm cod după ce le-am terminat toate. Aceasta implică utilizarea atunci() pentru a specifica o funcție care trebuie executată odată ce toate funcțiile asincrone au revenit.
