Jquery, șabloane de date

Pentru a evita neînțelegerile, vreau să avertizez că modulul nu este printre dezvoltat activ sau sprijinite în prezent, iar dezvoltatorii echipa jQuery nu recomandăm utilizarea acestuia. Acest lucru nu înseamnă că nu trebuie să-l utilizați, dar mi-a fost dator să vă spun despre acest lucru înainte de a le include în proiectele dvs. M-aș bucura să vă recomand o altă versiune dezvoltată în mod activ, dar încă nu am reușit să găsesc un înlocuitor apropiat pentru șabloanele jQuery. Dar chiar și cu atitudinea menționată față de dezvoltatori, acest modul este încă cel mai bun.

Istoricul modulului jQuery Templates este destul de neobișnuit. La acea vreme, Microsoft și echipa de dezvoltare jQuery a anunțat că trei plug-in-uri dezvoltat de Microsoft, având în vedere statutul de „funcționar“, care înainte de a nu a primit niciuna dintre plug-in-uri.

După ceva timp, echipa jQuery a anunțat refuzul de a utiliza aceste module și le-a lipsit de statutul lor oficial, precum și planurile lor de a le înlocui cu alte funcționalități. Înlocuirea propusă urma să facă parte din biblioteca jQuery UI. Este regretabil, dar adevărat că nici unul din ceea ce a fost promis încă nu a fost acordat și respinse plugin-uri sunt încă disponibile și sunt utilizate pe scară largă (în special în ceea ce privește plugin-urile pentru lucrul cu template-uri).

Evident, toată lumea decide dacă să utilizeze codul care nu este recomandat pentru utilizare de la sine, dar personal îmi place funcționalitatea oferită de șabloane și de multe ori o folosesc. În acest caz, presupun că pot în orice moment să se uite la codul sursă și de a elimina orice problemă gravă în cazul în care se produce, și că, uneori, încă mai trebuie să găsească soluții pentru a depăși dificultățile minore, plătește beneficiile oferite de utilizarea de template-uri .

Configurarea bibliotecii de șabloane jQuery

Înainte de a utiliza șabloanele jQuery, trebuie să încărcați biblioteca șabloanelor jQuery și să o conectați la document.

Despachetați arhiva și copiați jQuery.tmpl.js de fișiere (versiune de dezvoltare) sau jQuery.tmpl.min.js (versiunea pentru implementare) pentru serverul web. Următorul lucru pe care trebuie să-l faceți este să adăugați un element script la exemplul de document care conectează biblioteca de șabloane, așa cum se arată în exemplul de mai jos:

Vom folosi acest cod ca un exemplu de document în acest articol. Probabil ați observat că versiunea originală descrisă anterior, este nu numai faptul că a adăugat o bibliotecă de șabloane, dar, de asemenea, ca acesta să fie scos din elementele, care corespund diferitelor tipuri de producție de flori. Acest lucru se face în mod special astfel încât să putem restabili aceste elemente în document în diferite moduri utilizând biblioteca de șabloane.

Apariția documentului sursă în fereastra browserului în această etapă este prezentată în figură:

Un exemplu simplu de șablon de date

Cea mai bună modalitate de a afla șabloanele de date este de a ajunge imediat la afaceri. Pentru a demonstra caracteristicile de bază ale șabloanelor, vom folosi codul din exemplul de mai jos:

În secțiunile următoare, vom rupe exemplul în părți separate și vom analiza codul pentru fiecare dintre acestea separat. Când datele fac parte dintr-un document, ele sunt numite date inline. O alternativă este datele de la distanță. stocate pe server separat de document. Ne vom uita la date de la distanță mai târziu, dar acum se poate vedea că această întrebare este strâns legată de suportul Ajax, care oferă biblioteca jQuery.

Definiția datelor

Exemplul începe cu definirea datelor. În cazul nostru, datele sunt o serie de obiecte, fiecare dintre acestea descriind un tip separat de producție florală. Fragmentul de cod corespunzător este prezentat mai jos:

În acest exemplu, matricea este formată din șase obiecte, fiecare având un număr de proprietăți care descriu un anumit produs: numele afișat, numele produsului, cantitatea disponibilă de articole și prețul.

Definirea unui șablon

După cum probabil știți deja, elementul central al bibliotecii de șabloane este șablonul de date. Acesta este un set de elemente HTML care conțin substituenți care corespund diferitelor proprietăți ale obiectelor de date. Șablonul pentru acest exemplu este prezentat mai jos:

Primul lucru pe care ar trebui să-l acordați este că șablonul este plasat într-un element script al cărui atribut de tip este atribuit o valoare de tip inexistent - text / x-jquery-tmpl. Acest lucru se face astfel încât browserul să nu încerce să interpreteze conținutul șablonului ca marcaj HTML obișnuit. Deși acest lucru nu este esențial, această practică ar trebui urmată, deoarece este extrem de utilă și vă va permite să evitați în viitor multe probleme potențiale.

Al doilea punct pe care vreau să-ți concentrez atenția este că atributul id este folosit pentru a atribui un nume șablonului definit în elementul script. În acest caz, numele șablonului este flowerTmpl. Pentru a aplica un șablon unei date, trebuie să îi cunoașteți numele.

este convertit în următorul fragment HTML:

Înlocuirea valorilor nu este singurul lucru pe care șabloanele le pot face. Alte posibilități sunt discutate mai jos.

Aplicarea unui șablon

Pentru a îmbina un șablon cu date, utilizați metoda tmpl (). În acest caz, specificați datele care trebuie utilizate și șablonul aplicat acestora. Un exemplu de utilizare a acestei metode este prezentat mai jos:

Aici vom alege elementul care conține șablonul, folosind în acest scop $ (), și de apel pentru metoda rezultat tmpl (), trecându-l ca un argument pentru datele pe care dorim să le prelucreze.

Metoda tmpl () returnează un obiect standard jQuery care conține elemente derivate din șablon. În acest caz, aceasta conduce la un set de elemente div, fiecare dintre ele conțin elementele img, etichetă și intrare, configurate pentru unul dintre obiectele conținute în matricea de date. Pentru a insera intregul set ca element copil in elementul row1, folositi metoda appendTo (). Rezultatul este arătat în figură:

Modificarea rezultatului

Rezultatul nu este pe deplin satisfăcător, deoarece toate elementele care corespund diferitelor culori sunt afișate în același rând. Dar, deoarece avem de-a face cu un obiect jQuery, nu este dificil să aranjăm elementele așa cum ne trebuie. Exemplul de mai jos arată cum se poate face acest lucru prin lucrul la rezultatul metodei tmpl ():

În acest exemplu, felia () și final () folosit pentru îngustarea și lărgirea setului de elemente selectate și metoda appendTo () - pentru a adăuga elemente de subseturi generate utilizând șablonul în rânduri diferite.

Notă: pentru a readuce setul la starea originală, înainte de a fi aplicat slice () și appendTo (), metoda de tip end () a trebuit să fie apelată de două ori la rând. Nu există nimic ilegal în acest lucru și sunt dispus să folosesc metoda end () pentru a efectua acțiunile necesare în cadrul aceleiași instrucțiuni, dar sfârșitul () Secvența End () nu mă face să fiu entuziasmat. În astfel de cazuri, prefer să rupe întreaga secvență de acțiuni într-o serie de operațiuni separate, după cum se arată în exemplul de mai jos:

În ambele cazuri, rezultatul va fi același: reprezentarea totalitatea produselor în două rânduri, fiecare dintre care este afișat pe cele trei tipuri de culori, după cum se arată mai jos:

Modificați modul în care furnizați o intrare

O altă abordare posibilă este schimbarea modului în care datele sunt transferate în metoda tmpl (). Exemplul corespunzător este prezentat mai jos:

În acest scenariu, distribuția elementelor de-a lungul rândurilor se face utilizând șablonul de două ori, câte o dată pentru fiecare rând. Partea corespunzătoare a obiectelor de date este transmisă de fiecare dată șablonului folosind metoda slice (). În ciuda diferenței în această abordare față de cea precedentă, obținem același rezultat care a fost prezentat în figura de mai sus.

Calcularea expresiilor

În acest șablon, valoarea atributului de valori al elementului de intrare este stabilită pe baza valorii proprietății de tip stocklevel folosind operatorul condițional ternar. Expresia cuprinsă în bretele joacă același rol ca și valoarea imediată a proprietății scrise în locul ei. Dacă valoarea proprietății nivelului de bază este mai mare decât zero, valoarea este setată la 1, altfel 0.

Tipul paginii care rezultă în fereastra browserului este prezentat în figura de mai jos. Valoarea stocului, mai mare decât zero, este stabilită pentru toate culorile, cu excepția pionilor:

Acest exemplu ilustrează schema de bază pentru lucrul cu șabloane: datele sunt combinate cu un șablon pentru a obține obiecte DOM, care sunt apoi adăugate la document utilizând funcționalitatea principală jQuery. Pentru a genera conținut, puteți utiliza atât valorile specificate direct, cât și expresiile calculate.

Utilizând variabilele de șablon

Variabile ale șablonului de context

Funcția $ () a bibliotecii jQuery

Folosind variabila de date $

Variabila de date $ returnează elementul de date curent la care se aplică șablonul. De exemplu, variabila de date $ folosită se va referi alternativ la fiecare dintre obiectele care corespund tipurilor de culoare individuale. Pentru a obține datele din exemplul anterior, șablonul a folosit o declarație condițională ternară. Această abordare este destul de acceptabilă, totuși, citirea șabloanelor obținute în acest caz cauzează adesea dificultăți, care, desigur, este de dorit să nu se permită.

În acest exemplu, funcția stockDisplay () este definită, care returnează valoarea care trebuie afișată în elementul de intrare. Argumentul acestei funcții este obiectul de date pe care îl primim în interiorul șablonului folosind variabila de date $. Având în vedere că este vorba doar despre un operator ternar simplu cod lizibilitate, diferența față de versiunea anterioară nu este foarte semnificativă, dar în cazul mai multor expresii complexe, sau, în cazul utilizării repetate a expresiei în cadrul aceluiași șablon, va fi mult mai vizibile.

Definind funcțiile care vor fi chemați din șablon, aveți grijă. Ideea este că astfel de funcții trebuie definite înainte ca metoda tmpl () să fie apelată. Întotdeauna încerc să le pun la sfârșitul elementului script, dar dacă funcția ar trebui să se afle în interiorul handler-ului evenimentului gata, atunci cu siguranță trebuie să vă asigurați că a fost definit anterior. O altă greșeală obișnuită este că funcția este deseori definită în interiorul șablonului.

Folosind funcția $ () din interiorul șablonului

Materialele de umplutură utilizate în șablon poate utiliza funcția $ () biblioteca jQuery, dar este foarte important să ne amintim că elementele generate de șablonul, nu este conectat la document, și, prin urmare, nu vor cădea în seturi de elemente selectate jQuery. Folosesc rareori această caracteristică, pentru că, de obicei, mă interesează mai mult elementele și datele conexe pe care le generez.

Folosind variabila elementului $

În acest exemplu, vom crea un obiect de opțiuni, pentru care proprietatea (discount) și metoda (stockDisplay ()) sunt definite. Apoi, acest obiect este transmis metodei tmpl () ca al doilea argument. Accesul la proprietățile și metodele obiectului din șablon este asigurat de elementul variabil $. După cum puteți vedea, pentru a procesa reduceri în preț, aici se utilizează proprietatea de reducere a obiectului de opțiuni.

Vreau să vă atrag atenția asupra necesității de a include prefixul $ în numele variabilelor de context: $ item și $ data. Același prefix este, de asemenea, necesar în proiectarea descriptorului de șablon $ utilizat pentru a înlocui valorile din șablon. Omiterea oricăruia dintre aceste prefixe este una dintre cele mai frecvente erori.

Vom vorbi mai departe despre alte aplicații ale acestui obiect.

Utilizând șabloane imbricate

Atunci când se creează aplicații complexe, uneori este logic să se împartă un șablon mare în mai multe părți, uniunea cărora este deja în stadiul de execuție a aplicației. Așa cum se va arăta mai târziu, acest mod de combinare a șabloanelor oferă un control mai flexibil al producției. Vom începe cu cele mai elementare. Exemplul de mai jos arată modul în care un șablon se poate referi la altul:

În acest exemplu, șablonul este împărțit în două părți. Primul, șablonul flowerTmpl, este numit pentru fiecare element al matricei de date. La rândul său, acest șablon apelează șablonul inputTmpl pentru a crea elementele de intrare. Cel de-al doilea șablon este numit utilizând descriptorul>. În acest apel, se folosesc trei argumente. Primele două sunt elementul de date curent și obiectul de opțiuni; aceste argumente sunt închise în paranteze. Al treilea argument este șablonul numit. Acesta poate fi specificat fie ca un selector jQuery (așa cum este făcut mai sus), fie ca o variabilă sau funcție definită în script.

Utilizarea șabloanelor condiționate

Motorul template oferă posibilitatea de a lua decizii dinamice cu privire la utilizarea diferitelor părți ale șablonului, în funcție de îndeplinirea anumitor condiții. Pentru aceasta, există descriptori> și>. un exemplu despre care este prezentat în cele ce urmează:

Condiția este specificată în descriptorul>, iar partea șablonului cuprinsă între acest descriptor și descriptorul> va fi utilizată numai dacă rezultatul evaluării expresiei condiționate este adevărat. Dacă acest rezultat este fals, atunci partea specificată a șablonului este ignorată. În acest caz, valoarea proprietății de tip stocklevel este verificată și, dacă este zero, întregul șablon flowerTmpl este ignorat. Aceasta înseamnă că numai produsele stocate în depozit vor fi afișate, după cum se arată în figură:

Condițiile mai complexe pot fi specificate utilizând descriptorul>. care permite definirea părții șablonului care ar trebui utilizată în acele cazuri în care rezultatul evaluării expresiei în descriptorul> este fals. Exemplul corespunzător este prezentat mai jos:

În acest scenariu, setul de elemente afișat este determinat de numărul de unități dintr-un produs de marfă de un fel sau altul în stoc: mai mult de cinci, cinci, mai puțin de cinci sau deloc. Am introdus doar diferențe minore între elementele generate pentru fiecare dintre aceste condiții, dar aveți dreptul să aplicați aceste caracteristici pentru a genera conținut complet diferit. În cele din urmă, dacă este necesar, puteți apela cu condiția altor șabloane.

Rezultatul scenariului de mai sus este prezentat în figură:

Articole similare

• Cum se deschide o bază de date Microsoft Access

Trimiteți-le prietenilor: