4 octombrie 2010 a fost publicat despre anunțul a trei plugin-uri jQuery, create cu sprijinul echipei Microsoft. Aceste pluginuri sunt pluginul jQuery Templates, pluginul jQuery Data Linkși plugin de globalizare (pluginul de globalizare jQuery)– a primit statutul „Plugin-uri oficiale ale proiectului jQuery” (plugin-uri acceptate oficial ale proiectului jQuery).

Pluginul șablon este utilizat atunci când este necesar să afișați un obiect de date sau o matrice de obiecte în marcarea paginii. Este necesar un plugin de legare a datelor pentru a lega obiectele la elementele paginii și pentru a schimba valorile în mod sincron. Pluginul de globalizare vă permite să afișați date precum numere, data și ora, suma de bani etc. pe pagină în conformitate cu formatul limbii curente.

De menționat că echipa Microsoft și-a folosit expertiza considerabilă în aceste domenii, la fel și echipa de proiect jQuery și, cu o interacțiune bine stabilită, au rezultat, după părerea mea, instrumente excelente pentru dezvoltatori. În sprijinul părerii mele, pot adăuga că dezvoltatorii jQuery au anunțat includerea pluginurilor de șablon și a legăturii de date în biblioteca de bază jQuery deja în versiunea 1.5 și a pluginului de globalizare în versiunea corespunzătoare a jQuery UI. Pluginurile nu au primit încă starea de lansare, dar documentația de pe site este deja în curs de redactare activă. Apropo, echipa Microsoft a urmat tradițiile dezvoltării jQuery și a postat materiale de dezvoltare a pluginurilor pe github.com, unde sunt disponibile descrierile și sursele pluginurilor.

În acest articol, voi vorbi puțin despre plugin-ul șablonului.

Pluginul jQuery Templates

Să începem cu un exemplu simplu:

Deci, în exemplu, dezvoltatorul paginii a descris un șablon pentru afișarea obiectelor sub formă de markup (primul element scenariu ), apoi am primit o serie de obiecte de undeva filme și a apelat instrucțiunea pentru a genera marcajul necesar conform șablonului, luând date din matricea de obiecte furnizată și adăugând rezultatul la sfârșitul listei #filmist .
Ca rezultat al pluginului, vom obține următorul marcaj:

• Vioara Roșie (1998)
• Ochii larg închiși (1999)
• Moștenirea (1976)

Și acum la obiect.
Ce face pluginul?
Pluginul primește ca intrare un șir de șablon și un set de obiecte (sau un obiect) care trebuie să fie scos la un șir (sau marcare) cu formatare.
Unde se aplica?
Practic, acest plugin este util pentru afișarea dinamică a obiectelor JS pe o pagină, obiectele pot fi obținute într-o varietate de moduri, de exemplu, în timpul calculelor sau ca urmare a unor acțiuni ale utilizatorului și, desigur, exemplul cel mai des citat, în forma JSON în răspunsul serverului la o solicitare AJAX.

Metode de plugin

.tmpl([ date ], [ opțiuni ])
Obține conținutul primului element selectat și îl folosește ca șablon pentru ieșirea formatată a datelor specificate.
date – date care urmează să fie scoase în șablon (obiect sau matrice de obiecte).
Opțiuni – opțional, o extensie definită de utilizator sub formă de perechi cheie-valoare pentru obiectul de ieșire la șablon.
jQuery.tmpl(șablon, [ date ], [ opțiuni ])
Utilizează șablonul specificat pentru a formata ieșirea datelor specificate.
șablon – un șablon pentru formatarea datelor, poate fi unul din următoarele tipuri: un șir cu marcaj, un element HTML (inclusiv într-un wrapper jQuery), un șir corespunzător numelui unui șablon compilat anterior.
date, opțiuni - au același sens ca mai sus
.tmplItem()
Returnează pentru primul element selectat o structură (obiect) cu rezultatele motorului de șabloane. Obiectul returnat de metodă oferă acces la:

• Părțile HTML care compun șablonul
• unitatea asociată de date transmise
• șablon părinte dacă șablonul curent este imbricat
• șablonul curent utilizat pentru ieșire
• extensia definită de utilizator (câmpuri și metode) transmisă în parametrul opțiuni al metodei tmpl()

Această metodă este utilizată, de exemplu, atunci când, după ce datele au fost formatate, este necesar să se afle ce date au fost folosite pentru a forma o anumită parte de marcare sau să se actualizeze o parte de marcare folosind date noi.
jQuery.tmplItem(element)
Similar cu metoda .tmplItem, doar structura cu rezultatele motorului de șablon este căutată pentru element element (element HTML, inclusiv jQuery wrapper).
.Nume șablon ])
Metoda realizează o versiune compilată a șablonului de format din conținutul primului element selectat.
Nume - nume șablon opțional, dacă numele este specificat, atunci îl puteți folosi pentru a face referire la acest șablon în metodă jQuery.tmpl(nume, date, opțiuni)
jQuery.template([nume, ]șablon)
Metoda este similară cu cea descrisă mai sus, doar că aici șablonul este trecut ca parametru șablon - poate fi un șir, un șir cu markup, un element HTML (inclusiv într-un wrapper jQuery).

Sintaxa șablonului

Voi descrie pe scurt câteva dintre cele mai de bază elemente ale șablonului, restul sper să le descriu mai detaliat în articolul următor (dacă există un răspuns pozitiv la acest articol)
$(fieldNameOrExpression) și ((= fieldNameOrExpression))
Vă permite să inserați valoarea unui câmp (proprietate) a unui obiect de date în șablon; poate fi folosit și pentru a insera rezultatul unei metode sau al expresiei js. De exemplu, „$(Nume)” - inserează valoarea câmpului obj.Name în șablon și, în ciuda faptului că Languages ​​este un câmp al obiectului căruia îi este atribuită matricea, „$(Languages.length)” - va insera lungimea acestei matrice în șablon și, în cele din urmă, dacă obiectul are o metodă getLanguages ​​​​cu doi parametri, atunci „$(getLanguages(Limbi, ' - '))" – inserează rezultatul acestei metode în șablon.
((html fieldNameOrExpression))
Elementul șablon $(câmp) (sau ((= câmp))) inserează valoarea câmpului specificat în rezultat ca text, adică. dacă există etichete HTML în șir, acestea vor fi codificate, nu convertite în markup. Dacă trebuie să inserați date în șablon sub formă de markup HTML, atunci trebuie să utilizați sintaxa ((html<что нужно вставить>}} .
S-a spus deja destule pentru a începe cu pluginul, pot doar să adaug că sintaxa șablonului vă permite să inserați șabloane imbricate, instrucțiuni condiționale, să accesați unele obiecte JS și jQuery și altceva... Restul este materialul unui viitor articol.

Surse

Articolul se bazează pe materiale găsite pe World Wide Web. Practic, aceasta este o traducere a documentației oficiale. Originalele pot fi vizualizate la următoarele link-uri:

• (exemple luate de acolo)

Despre autor

Numele meu este Andrei Zaitsev, profil pe forumul zandroid

Acesta este primul meu articol pe acest blog și sper să nu fie ultimul. Mulțumesc mult lui Gennady pentru oportunitatea de a-l publica și pentru sfaturile utile privind scrierea și proiectarea materialului.

Exemple

Exemplul 1: Comutarea dinamică a șablonului aplicat

Apăsați pentru detalii:

Destul de complex și voluminos, folosește mai multe metode de plugin deodată, preluate din.

Exemplul 2: inserarea datelor de marcare într-un șablon

În acest exemplu, atât valorile câmpurilor de șir simple, cât și valorile de markup sunt adăugate șablonului, preluate de aici.

P.S.

Nu am scris exemple, dacă publicul îmi susține demersurile, atunci pot să descriu pas cu pas ce, cum și de ce și să mai dau câteva exemple.

Vă rugăm să puneți întrebări despre plugin pe forum, dacă există comentarii specifice la articol, apoi comentați mai jos.

Plugin pentru implementarea cuvintelor în schimbare cu diverse efecte animate. Efectul CSS este potrivit pentru implementarea de site-uri promoționale și bannere animate.

Implementarea împărțirii conținutului paginii în file (file) folosind efecte CSS3 animate. Patru versiuni: file orizontale și verticale cu diverse efecte animate.

3. Slider jQuery receptiv bazat pe pluginul IMPRESS.JS

Slider cool cu ​​o imitație a unui efect 3D atunci când defilați prin diapozitive. Când măriți/descreți dimensiunea ecranului - dimensiunea fontului, imaginile și toate elementele de pe slide se modifică, ceea ce garantează afișarea corectă la orice extindere a ecranului. Defilarea automată este oferită.

Soluție jQuery pentru a crea o navigare convenabilă prin secțiuni ale unui document fără a reîncărca pagina. Fiecare secțiune este afișată într-un bloc separat cu defilare verticală, iar tranziția între ele se poate face atât cu un clic de mouse, cât și folosind titlul (cu o extindere a ecranului mare, titlul este afișat în partea stângă, la vizualizarea site-ului pe un mic ecran - deasupra documentului).

Implementarea navigarii continutului sub forma Lista de categorii → Lista sectiunilor → Continutul sectiunii. Navigarea este însoțită de diferite efecte JS.

Derularea diapozitivelor se realizează cu un efect Parallax (mișcarea straturilor la viteze diferite, creând împreună un efect 3D). Mărimea glisorului se modifică proporțional cu dimensiunea ferestrei browserului.

Prezentare cu muzică. Este posibil să întrerupeți sau să omiteți o compoziție muzicală.

11. Un meniu deosebit pe jQuery și CSS

Când este selectat un element de meniu, zona cu conținutul său este extinsă în partea de sus.

Meniu derulant orizontal cu un efect jQuery interesant al elementelor imbricate.

Pluginul minunat jQuery CSS, va fi o completare foarte utilă pentru orice studio web sau site-ul liber profesionist. Cu acesta, puteți afișa vizual exemple de lucrări efectuate, defalcate pe timp. Cronologia în sine este afișată în partea de jos, iar lucrarea finalizată este afișată în partea de sus. Pentru a naviga între joburi, puteți utiliza fie scara, fie săgețile stânga/dreapta.

14. Galeria TouchTouch optimizată pentru navigarea pe mobil

15. CSS3 Cycle Slider Image Slider

Când dați clic pe nume, apare o imagine cu o descriere. Se folosește doar CSS3.
Tutorial galerie.

17. Sfaturi utile jQuery și CSS3 colorate

Sfaturi instrumente jQuery în 7 stiluri. Ușor de conectat și utilizat în proiectele dvs.

Dacă există mai mult de 5 imagini în galerie, apar săgeți stânga/dreapta pentru a naviga prin fotografii.

Slide-urile pot fi nu numai imagini, ci și alt conținut HTML.

Plugin pentru crearea de umbre fotorealiste.

Noua implementare a cursorului.

26. Transferați textul „Bacon”

Un efect neobișnuit de împachetare a textului pe o pagină pe o nouă linie de-a lungul unei curbe sau a unei linii date cu un anumit pas de decalaj.

Pluginul calculează automat dimensiunea fontului pentru fiecare cuvânt, astfel încât tot textul să ocupe aceeași zonă în lățime, indiferent de numărul de cuvinte dintr-o linie.

28. Selectarea tipului de afișare bloc folosind CSS3

Patru tipuri de afișare bloc: imagine cu descriere în trei coloane, imagine cu descriere într-o coloană, doar imagini, doar descriere text. Pentru a schimba tipul de afișare a blocurilor, trebuie să utilizați pictogramele de sus.

Oferă posibilitatea de a utiliza șabloane care facilitează generarea de elemente HTML din obiecte de date JavaScript.

Pentru a evita neînțelegerile, vreau să vă avertizez că acest modul nu este dezvoltat activ sau întreținut în prezent, iar echipa de dezvoltare jQuery nu recomandă utilizarea lui. Asta nu înseamnă că nu ar trebui să-l folosești, dar am simțit că era de datoria mea să-ți spun despre el înainte de a-l include în proiectele tale. Aș fi bucuros să recomand o altă opțiune dezvoltată activ, dar nu am reușit să găsesc un înlocuitor pentru șabloanele jQuery care să se apropie. Dar chiar și cu atitudinea menționată a dezvoltatorilor față de acesta, 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 au anunțat că trei plug-in-uri dezvoltate de Microsoft au primit statutul „oficial”, lucru pe care nici un plug-in nu a fost acordat anterior.

Câtva timp mai târziu, echipa jQuery a anunțat că renunță la aceste module și le elimină din statutul oficial, precum și planurile lor de a le înlocui cu alte funcționalități. Înlocuirea intenționată trebuia să facă parte din biblioteca jQuery UI. Este regretabil, dar adevărat că nimic din ceea ce a fost promis nu a fost încă livrat, iar pluginurile învechite sunt încă disponibile și utilizate pe scară largă (în special pluginul de șabloane).

Evident, este la latitudinea fiecărui individ să decidă dacă folosește sau nu cod depreciat, dar personal îmi place funcționalitatea oferită de șabloane și le folosesc des. Procedând astfel, presupun că pot oricând să mă uit la codul sursă și să remediez orice problemă serioasă dacă apare și că uneori mai trebuie să găsești soluții pentru a depăși dificultățile minore, se plătește cu beneficiile pe care utilizarea șabloane oferă. .

Configurarea bibliotecii de șabloane jQuery

Înainte de a utiliza șabloanele jQuery, trebuie să descărcați biblioteca de șabloane jQuery și să o includeți în documentul dvs.

Dezarhivați arhiva și copiați fișierul jQuery.tmpl.js (versiunea de dezvoltare) sau jQuery.tmpl.min.js (versiunea de implementare) pe serverul dvs. web. Următorul lucru de făcut este să adăugați un element de script la documentul exemplu care include biblioteca de șabloane, așa cum se arată în exemplul de mai jos:

Florarie

Vom folosi acest cod ca exemplu de document în acest articol. Poate ați observat că diferă de versiunea originală discutată mai devreme nu numai prin faptul că i s-a adăugat o bibliotecă de șabloane, ci și prin faptul că din ea au fost eliminate elemente corespunzătoare diferitelor tipuri de produse florale. Acest lucru se face special pentru a putea restaura aceste elemente din document în diferite moduri folosind biblioteca de șabloane.

Aspectul documentului sursă în fereastra browserului în această etapă este prezentat în figură:

Un exemplu simplu de șablon de date

Cel mai bun mod de a învăța despre modelele de date este să sari direct în el. Pentru a demonstra principalele caracteristici ale șabloanelor, folosim codul din exemplul de mai jos:

... ...

În secțiunile următoare, vom împărți exemplul în părți separate și vom analiza codul pentru fiecare dintre ele separat. Când datele fac parte dintr-un document, se numesc date inline. Alternativa sunt datele de la distanță, stocate pe server separat de document. Ne vom uita la datele de la distanță puțin mai târziu, dar deocamdată, veți observa că această problemă este strâns legată de suportul Ajax oferit de biblioteca jQuery.

Definirea datelor

Exemplul începe prin definirea datelor. În cazul nostru, datele sunt o serie de obiecte, fiecare dintre acestea descriind un tip separat de producție de flori. Fragmentul de cod relevant este mai jos:

Var data = [ ( nume: "Astra", produs: "astor", nivel stoc: "10", preț: 2,99), ( nume: "Narcis", produs: "narcise", nivel stoc: "12", preț: 1,99 ), ( nume: „Trandafir”, produs: „trandafir”, nivel stoc: „2”, preț: 4,99), ( nume: „Bujor”, produs: „bujor”, nivel stoc: „0”, preț: 1,50), ( denumire: „Primula”, produs: „primula”, nivel stoc: „1”, preț: 3,12), ( nume: „ghiocel”, produs: „ghiocel”, nivel stoc: „15”, preț: 0,99), ];

Datele sunt exprimate ca unul sau mai multe obiecte JavaScript. Biblioteca de șabloane jQuery oferă multă flexibilitate în alegerea obiectelor care pot fi utilizate ca date, dar formatul afișat mai sus se potrivește cu formatul datelor. JSON, este cea mai comună. Formatul JS0N este foarte important deoarece este adesea folosit cu Ajax.

În acest exemplu, matricea constă din șase obiecte, fiecare cu un set de proprietăți care descriu un anumit produs: numele afișat, numele produsului, numărul de unități disponibile și prețul.

Definiție șablon

După cum probabil puteți ghici, piesa centrală a bibliotecii de șabloane este șablonul de date. 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 de observat este că șablonul este plasat într-un element de script al cărui atribut de tip este setat la o valoare de tip inexistent - text/x-jquery-tmpl. Acest lucru este pentru a împiedica browserul să încerce să interpreteze conținutul șablonului ca un marcaj HTML normal. Deși nu este esențială, această practică trebuie urmată deoarece este extrem de benefică și vă va permite să evitați o mulțime de potențiale probleme în viitor.

Al doilea punct pe care vreau să-l aduc în atenție este că atributul id este folosit pentru a denumi șablonul definit pe elementul de script. În acest caz, numele șablonului este flowerTmpl. Pentru a aplica un șablon la date, trebuie să cunoașteți numele acestuia.

Conținutul șablonului va fi aplicat tuturor obiectelor din setul de date, rezultând un set de elemente HTML pentru fiecare obiect. Puteți observa că structura șablonului corespunde în general setului de elemente care au fost folosite în articolele anterioare pentru a reprezenta diferite tipuri de produse din flori. Principala diferență dintre ele este elementele de cod care îndeplinesc funcțiile de substituenți (substituenți de date).

În timpul procesării șablonului, fiecare substituent este înlocuit cu valoarea proprietății preluată din obiectul curent. De exemplu, pentru primul obiect matrice, substituentul $(produs) va fi înlocuit cu valoarea proprietății produsului, adică. „astor”. Deci face parte din tipar

$(nume):

convertit în următorul fragment HTML:

Aster:

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

Aplicarea unui șablon

Pentru a combina un șablon cu date, utilizați metoda tmpl().. Procedând astfel, specificați datele care vor fi utilizate și șablonul care trebuie aplicat acestora. Un exemplu de utilizare a acestei metode este dat mai jos:

$("#flowerTmpl").tmpl(date).appendTo("#row1");

Aici selectăm elementul care conține șablonul folosind funcția $() în acest scop și apelăm metoda tmpl() pe rezultat, pasând-i datele pe care dorim să le procesăm ca argument.

Metoda tmpl() returnează un obiect jQuery standard care conține elementele preluate din șablon. În acest caz, rezultă un set de elemente div, fiecare conținând img, etichetă și elemente de intrare configurate pentru unul dintre obiectele conținute în matricea de date. Pentru a insera întregul set ca copil al elementului row1, utilizați metoda appendTo(). Rezultatul este prezentat în figură:

Modificarea rezultatului

Rezultatul nu este pe deplin satisfăcător, deoarece toate elementele corespunzătoare diferitelor culori sunt afișate pe un singur rând. Dar din moment ce avem de-a face cu un obiect jQuery, poziționarea elementelor așa cum ne dorim nu este mare lucru. Exemplul de mai jos arată cum se poate face acest lucru prin influențarea rezultatului metodei tmpl():

... $("#flowerTmpl").tmpl(date) .slice(0, 3).appendTo("#row1").end().end() .slice(3).appendTo("#row2" );

În acest exemplu, metodele slice() și end() sunt folosite pentru a restrânge și extinde setul de elemente selectate, iar metoda appendTo() este folosită pentru a adăuga subseturi de elemente generate de șablon pe diferite rânduri.

Rețineți că pentru a readuce setul la starea inițială înainte de aplicarea metodelor slice() și appendTo(), metoda end() trebuia apelată de două ori la rând. Nu este nimic ilegal în asta și sunt fericit să folosesc metoda end() pentru a face ceea ce am nevoie într-o singură declarație, dar nu sunt încântat de secvența end().end(). În astfel de cazuri, prefer să împart întreaga secvență de acțiuni într-un număr de operații separate, așa cum se arată în exemplul de mai jos:

Var templResult = $("#flowerTmpl").tmpl(date); templResult.slice(0, 3).appendTo("#row1"); templResult.slice(3).appendTo("#row2");

În ambele cazuri, rezultatul va fi același: o prezentare a unei colecții de produse pe două rânduri, fiecare dintre ele afișând trei tipuri de culori, așa cum se arată în figură:

Modificați modul în care este furnizată intrarea

O altă abordare posibilă este modificarea modului în care datele sunt transmise metodei tmpl(). Exemplul relevant este prezentat mai jos:

Vartemplate = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2");

În acest scenariu, distribuirea elementelor în rânduri se face prin utilizarea șablonului de două ori - o dată pentru fiecare rând. Partea corespunzătoare a obiectelor de date este transmisă șablonului de fiecare dată folosind metoda slice(). În ciuda diferenței dintre această abordare și cea anterioară, obținem același rezultat care a fost prezentat în figura de mai sus.

Evaluarea expresiei

Obiectele de date pot fi folosite pentru mai mult decât pentru obținerea valorilor proprietăților. Dacă puneți o expresie JavaScript între două acolade, motorul de șablon o va evalua și o va insera în HTML generat de șablon. Exemplul relevant este prezentat mai jos:

În acest șablon, atributul de valoare al elementului de intrare este setat pe baza valorii proprietății stoclevel folosind un operator condițional ternar. O expresie cuprinsă între acolade joacă același rol ca o valoare de proprietate imediată scrisă în schimb. Dacă valoarea proprietății stoclevel este mai mare decât zero, atunci valoarea este setată la 1, în caz contrar este setată la 0.

Vizualizarea paginii rezultate în fereastra browserului este prezentată în figura de mai jos. O valoare a nivelului stocului mai mare decât zero este setată pentru toate culorile, cu excepția bujorilor:

Acest exemplu ilustrează modelul de bază al lucrului cu șabloane: datele sunt combinate cu un șablon pentru a obține obiecte DOM, care sunt apoi adăugate la document folosind funcționalitatea de bază a jQuery. Puteți folosi atât valorile date direct, cât și expresiile calculate pentru a genera conținut.

Utilizarea variabilelor șablon

Șabloanele nu sunt JavaScript. Orice conținut pe care îl adăugați la elementul de script este considerat parte a șablonului și va fi inclus în rezultat. Pentru a face șabloanele mai flexibile, vi se oferă un număr mic de variabile de context care pot fi utilizate în descriptori de substituenți. O scurtă descriere a acestor variabile este oferită în tabelul de mai jos:

Folosind variabila $data

Variabila $data returnează elementul de date curent căruia i se aplică șablonul. De exemplu, variabila $data folosită se va referi la fiecare dintre obiecte pe rând, corespunzătoare unor tipuri individuale de flori. Șablonul a folosit un operator condițional ternar pentru a prelua datele din exemplul anterior. Această abordare este destul de acceptabilă, totuși, citirea șabloanelor rezultate provoacă adesea dificultăți, ceea ce, desigur, este de dorit să se evite.

Încerc întotdeauna să păstrez codul șablonului la minimum, așa că prefer să folosesc variabila $data în cadrul funcțiilor JavaScript pe care apoi le apelez din șablon. Demo-ul relevant este prezentat mai jos:

Acest exemplu definește o funcție stockDisplay() care returnează valoarea care ar trebui să fie afișată în elementul de intrare. Argumentul acestei funcții este un obiect de date, pe care îl obținem în șablon folosind variabila $data. Având în vedere că acesta este doar un simplu operator ternar, diferența de lizibilitate a codului față de versiunea anterioară nu este foarte semnificativă, dar în cazul expresiilor mai complexe sau în cazul utilizării repetate a unei expresii în cadrul aceluiași șablon, va fi mult mai vizibil.

Când definiți funcțiile care vor fi apelate din șablon, aveți grijă. Ideea este că astfel de funcții trebuie definite înainte de a apela metoda tmpl(). Întotdeauna încerc să le pun la sfârșitul elementului de script, dar dacă funcția trebuie să fie într-un handler de evenimente gata, atunci asigurați-vă că a fost definită înainte. O altă greșeală comună este că o funcție este adesea definită în interiorul unui șablon.

Folosind funcția $() în interiorul unui șablon

Puteți utiliza funcția $() a jQuery pentru substituenții dintr-un șablon, dar este important să rețineți că elementele generate de șablon nu sunt atașate documentului și, prin urmare, nu vor fi incluse în seturile de selecție ale jQuery. Folosesc rar această caracteristică pentru că de obicei sunt mai interesat de elementele și datele asociate acestora pe care le generez eu însumi.

Folosind variabila $item

Obiectul returnat de variabila $item face mai multe lucruri. Primul este de a permite schimbul de date suplimentare între scriptul JavaScript și șablon. Exemplul relevant este prezentat mai jos:

În acest exemplu, creăm un obiect opțiuni care definește o proprietate (discount) și o metodă (stockDisplay()). Acest obiect este apoi transmis metodei tmpl() ca al doilea argument. Accesul la proprietățile și metodele obiectului din șablon este oferit de variabila $item. După cum puteți vedea, pentru a gestiona reducerea în preț, aici este utilizată proprietatea discount a obiectului 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 necesar și în constructul descriptor al șablonului $(...) folosit pentru a înlocui valorile în șablon. Omiterea oricăruia dintre aceste prefixe este una dintre cele mai frecvente greșeli.

Despre alte utilizări ale acestui obiect vom vorbi mai târziu.

Utilizarea șabloanelor imbricate

Când creați aplicații complexe, uneori are sens să împărțiți un șablon mare în mai multe părți, care sunt combinate deja în etapa de execuție a aplicației. După cum va fi arătat mai târziu, acest mod de a combina șabloanele oferă un control mai flexibil al ieșirii. Vom începe cu cele mai elementare. Exemplul de mai jos arată cum un șablon se poate referi la altul:

...

În acest exemplu, șablonul este împărțit în două părți. Primul, șablonul flowerTmpl, este apelat pentru fiecare element al matricei de date. La rândul său, acest șablon apelează șablonul inputTmpl pentru a crea elemente de intrare. Al doilea șablon este numit folosind descriptorul ((tmpl)). Acest apel necesită trei argumente. Primele două sunt elementul curent și obiectul opțiuni; aceste argumente sunt cuprinse între paranteze. Al treilea argument este șablonul de apelat. Poate fi setat fie de un selector jQuery (așa cum s-a făcut mai sus), fie de o variabilă sau funcție definită în script.

Utilizarea șabloanelor condiționate

Motorul de șablon oferă capacitatea de a lua dinamic decizii cu privire la utilizarea diferitelor părți ale unui șablon, în funcție de îndeplinirea anumitor condiții. Pentru asta sunt descriptorii. ((dacă))și ((/dacă)), din care un exemplu este prezentat mai jos:

... ((dacă nivelul stocului > 0))

Condiția este specificată în descriptorul ((dacă)), iar partea din șablon inclusă între acest descriptor și descriptorul ((/dacă)) va fi folosită numai dacă condiționalul este evaluat la adevărat. Dacă acest rezultat este fals, atunci partea specificată a șablonului este ignorată. În acest caz, valoarea proprietății stoclevel este verificată, iar dacă este zero, atunci întreg șablonul flowerTmpl este ignorat. Aceasta înseamnă că vor fi afișate numai acele produse care sunt în stoc, așa cum se arată în figură:

Condiții mai complexe pot fi specificate folosind descriptorul ((altfel)), care vă permite să specificați partea șablonului care ar trebui utilizată în cazurile în care rezultatul evaluării expresiei din descriptor ((dacă)) este fals. Exemplul relevant este prezentat mai jos:

... ((dacă nivelul stocului > 5))

În acest scenariu, setul de articole de afișare este determinat de câte articole dintr-un anumit tip de marfă sunt î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 puteți folosi aceste funcții pentru a genera conținut complet diferit. În cele din urmă, alte șabloane pot fi apelate condiționat dacă este necesar.

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

Odată cu lansarea jQuery, viața dezvoltatorilor a devenit mult mai ușoară. De exemplu, putem face cu ușurință următoarele:

$("#someElement").children().each(function() ( $(this).wrap($("

Acest cod va pune toți copiii elementului cu id #someElement într-o etichetă