2010. október 4-én jelent meg három jQuery plugin bejelentése, amelyek a Microsoft csapatának támogatásával készültek. Ezek a bővítmények a jQuery Templates beépülő modul, a jQuery Data Link beépülő modulés globalizációs bővítmény (a jQuery Globalization bővítmény)– „A jQuery projekt hivatalos bővítményei” állapotot kapta (a jQuery projekt hivatalosan támogatott bővítményei).

A sablon beépülő modult akkor használják, ha egy adatobjektumot vagy objektumok tömbjét kell megjeleníteni az oldaljelölésben. Az objektumok oldalelemekhez való kapcsolásához és az értékek szinkron megváltoztatásához adatkötési bővítményre van szükség. A globalizációs beépülő modul lehetővé teszi olyan adatok megjelenítését az oldalon, mint a számok, dátum és idő, pénzösszeg stb., az aktuális nyelv formátumának megfelelően.

Megjegyzendő, hogy a Microsoft csapata – akárcsak a jQuery projektcsapata – kihasználta jelentős szakértelmét ezeken a területeken, és egy jól bevált interakcióval véleményem szerint kiváló eszközökké váltak a fejlesztők számára. Véleményem alátámasztására hozzáteszem, hogy a jQuery fejlesztői bejelentették, hogy a jQuery alapkönyvtárába már az 1.5-ös verzióban is beépítik a sablon pluginokat és az adatkötést, a jQuery UI megfelelő verziójában pedig a globalizációs bővítményt. A beépülő modulok még nem kapták meg a kiadás állapotát, de az oldalon már aktívan készül a dokumentáció. A Microsoft csapata egyébként követte a jQuery fejlesztés hagyományait, és a github.com-ra tettek közzé plugin-fejlesztési anyagokat, ahol elérhetők a beépülő modulok leírásai és forrásai.

Ebben a cikkben egy kicsit a sablon beépülő modulról fogok beszélni.

jQuery Templates beépülő modul

Kezdjük egy egyszerű példával:

Tehát a példában az oldal fejlesztője leírt egy sablont az objektumok jelölés formájában történő megjelenítésére (az első elem forgatókönyv ), akkor valahonnan szereztem egy sor objektumot filmeket és meghívta azt az utasítást, hogy a sablonnak megfelelően generálja a szükséges jelölést, vegye ki az adatokat a megadott objektumtömbből, és adja hozzá az eredményt a lista végéhez #filmes .
A bővítmény eredményeként a következő jelölést kapjuk:

• A vörös hegedű (1998)
• Tágra zárt szemek (1999)
• Az Örökség (1976)

És most a lényegre.
Mit csinál a plugin?
A beépülő modul bemenetként egy sablonkarakterláncot és egy objektumkészletet (vagy egy objektumot) kap, amelyet formázva kell kiadni egy karakterláncba (vagy jelölésbe).
Hol alkalmazható?
Ez a beépülő modul alapvetően a JS objektumok oldalon történő dinamikus megjelenítésére szolgál, az objektumokat többféle módon lehet megszerezni, például számítások során vagy néhány felhasználói művelet eredményeként, és természetesen a leggyakrabban idézett példa, a JSON formája a szerver válaszában egy AJAX kérésre.

Beépülő modulok módszerei

.tmpl([ adatok ], [ opciók ])
Lekéri az első kiválasztott elem tartalmát, és sablonként használja a megadott adatok formázott kimenetéhez.
adat – a sablonba kiadandó adatok (objektum vagy objektumtömb).
lehetőségek – opcionálisan egy felhasználó által definiált kiterjesztés kulcs-érték párok formájában a sablon kimeneti objektumához.
jQuery.tmpl(sablon, [ adatok ], [ opciók ])
A megadott sablont használja a megadott adatok kimenetének formázásához.
sablon – adatformázási sablon, a következő típusok egyike lehet: karakterlánc jelöléssel, HTML elem (beleértve a jQuery burkolóját is), egy korábban lefordított sablon nevének megfelelő karakterlánc.
adatok, opciók - jelentésük megegyezik a fentiekkel
.tmplItem()
Az első kiválasztott elemhez egy struktúrát (objektumot) ad vissza a sablonozó motor eredményeivel. A metódus által visszaadott objektum hozzáférést biztosít a következőkhöz:

• A sablont alkotó HTML részek
• az átvitt adatok kapcsolódó egysége
• szülősablon, ha az aktuális sablon be van ágyazva
• a kimenethez használt aktuális sablon
• felhasználó által definiált kiterjesztés (mezők és metódusok) a tmpl() metódus options paraméterében

Ezt a módszert például akkor alkalmazzák, amikor az adatok formázása után meg kell találni, hogy milyen adatokból alakítottak ki egy adott jelölést, vagy új adatok felhasználásával frissíteni kell egy jelölést.
jQuery.tmplItem(elem)
A .tmplItem metódushoz hasonlóan csak a sablonmotor eredményeit tartalmazó struktúrát keresi az elem elem (HTML elem, beleértve a jQuery wrappert is).
.Sablonnév ])
A metódus az első kiválasztott elem tartalmából elkészíti a formátumsablon összeállított változatát.
név - opcionális sablonnév, ha a név meg van adva, akkor a metódusban erre a sablonra hivatkozhat jQuery.tmpl(név, adatok, beállítások)
jQuery.template([név, ]sablon)
A módszer hasonló a fent leírtakhoz, csak itt a sablont paraméterként adjuk át sablon - lehet karakterlánc, karakterlánc jelöléssel, HTML elem (beleértve a jQuery wrappert is).

Sablon szintaxis

Röviden leírom a sablon néhány legalapvetőbb elemét, a többit remélem a következő cikkben részletesebben is leírom (ha pozitív válasz érkezik erre a cikkre)
$(fieldNameOrExpression) és ((= fieldNameOrExpression))
Lehetővé teszi egy adatobjektum mezőjének (tulajdonságának) értékének beszúrását a sablonba, valamint egy metódus vagy js kifejezés eredményének beszúrására is használható. Például, "$(név)" - beszúrja az obj.Name mező értékét a sablonba, és annak ellenére, hogy a Languages ​​az objektum mezője, amelyhez a tömb hozzá van rendelve, "$(Languages.length)" - beilleszti ennek a tömbnek a hosszát a sablonba, és végül, ha az objektum rendelkezik getLanguages ​​metódussal két paraméterrel, akkor "$(getLanguages(Languages, ' - '))" – beszúrja a módszer eredményét a sablonba.
((html fieldNameOrExpression))
A $(field) sablonelem (vagy (= mező))) a megadott mező értékét szövegként illeszti be az eredménybe, pl. ha HTML címkék vannak a karakterláncban, akkor azokat kódolják, nem konvertálják jelöléssé. Ha adatokat kell beszúrnia a sablonba HTML jelölés formájában, akkor a szintaxist kell használnia ((html<что нужно вставить>}} .
Már eleget mondtunk a bővítmény használatának megkezdéséhez, csak annyit tudok hozzátenni, hogy a sablon szintaxisa lehetővé teszi beágyazott sablonok, feltételes utasítások beszúrását, néhány JS és jQuery objektum elérését, és még valami mást... A többi egy jövőbeli cikk.

Források

A cikk a világhálón található anyagokon alapul. Alapvetően ez a hivatalos dokumentáció fordítása. Az eredeti példányok az alábbi linkeken tekinthetők meg:

• (a példák onnan vettek)

A szerzőről

A nevem Andrej Zaicev, profil a zandroid fórumon

Ez az első cikkem ezen a blogon, és remélem nem is az utolsó.Köszönet Gennagyijnak a közzététel lehetőségéért és a hasznos tippekért az anyag megírásához és megtervezéséhez.

Példák

1. példa: Az alkalmazott sablon dinamikus váltása

Kattints a részletekért:

Meglehetősen összetett és terjedelmes, több beépülő modult használ egyszerre, innen átvéve.

2. példa: Jelölési adatok beszúrása egy sablonba

Ebben a példában az egyszerű karakterlánc mezőértékek és a jelölési értékek is hozzáadódnak a sablonhoz, innen vettük.

P.S.

Példákat nem írtam, ha a közönség támogatja a vállalkozásomat, akkor lépésről lépésre le tudom írni, hogy mit, hogyan és miért, és hozok még néhány példát.

Kérem, tegyen fel kérdéseket a bővítménnyel kapcsolatban a fórumon, ha vannak megjegyzései kifejezetten a cikkhez, kommentelje alább.

Beépülő modul a szavak megváltoztatásához különféle animációs effektusokkal. A CSS effektus alkalmas promóciós oldalak és animált bannerek megvalósítására.

Az oldaltartalom lapokra (lapokra) való felosztásának megvalósítása animált CSS3 effektusok segítségével. Négy változat: vízszintes és függőleges fülek különféle animációs effektusokkal.

3. Reszponzív jQuery csúszka az IMPRESS.JS bővítmény alapján

Menő csúszka a 3D effektus utánzásával a diák között görgetve. Amikor növeli/csökkenti a képernyő méretét - a betűméret, a képek és a dián lévő összes elem mérete megváltozik, ami garantálja a megfelelő megjelenítést a képernyő bármely bővítésekor. Automatikus görgetés biztosított.

A jQuery megoldás kényelmes navigációt biztosít a dokumentum szakaszai között az oldal újratöltése nélkül. Az egyes szakaszok külön blokkban, függőleges görgetéssel jelennek meg, és az átmenet közöttük egérkattintással és a cím használatával is megtehető (nagy képernyőbővítésnél a cím a bal oldalon jelenik meg, az oldal megtekintésekor egy kis képernyő – a dokumentum tetején).

Tartalmi navigáció megvalósítása Kategóriák listája → Szekciók listája → Szekciótartalom formában. A navigációt különféle JS effektusok kísérik.

A diák görgetése Parallax effektussal történik (a rétegek különböző sebességgel történő mozgatása, együtt 3D hatás létrehozása). A csúszka mérete a böngészőablak méretével arányosan változik.

Diavetítés zenével. Lehetőség van egy zenei kompozíció szüneteltetésére vagy kihagyására.

11. Különleges menü a jQuery-n és a CSS-en

Amikor kiválasztunk egy menüpontot, a tartalmat tartalmazó terület felül kibővül.

Legördülő vízszintes menü a beágyazott elemek érdekes jQuery effektusával.

A fantasztikus jQuery CSS bővítmény nagyon hasznos kiegészítője lesz bármely webstúdiónak vagy szabadúszó webhelynek. Ezzel vizuálisan megjelenítheti az elvégzett munkák példáit, idő szerinti bontásban. Alul maga az idővonal, felül pedig az elkészült munka látható. A feladatok közötti navigáláshoz használhatja a léptéket vagy a bal/jobb nyilat.

14. TouchTouch galéria mobil böngészéshez optimalizálva

15. CSS3 Cycle Slider Image Slider

A névre kattintva egy kép jelenik meg leírással. Csak a CSS3 használatos.
Galéria bemutató.

17. Menő színes jQuery és CSS3 eszköztippek

jQuery eszköztippek 7 stílusban. Könnyen csatlakoztatható és használható a projektekben.

Ha 5-nél több kép található a galériában, balra/jobbra nyilak jelennek meg a fotók közötti navigáláshoz.

A diák nem csak képek, hanem egyéb HTML-tartalom is lehet.

Beépülő modul fotorealisztikus árnyékok létrehozásához.

A csúszka friss megvalósítása.

26. „Bacon” átviteli szöveg

Szokatlan hatás, ha egy oldalon lévő szöveget egy görbe vagy egy adott vonal mentén egy új sorba tördeljük egy bizonyos eltolási lépéssel.

A beépülő modul automatikusan kiszámítja a betűméretet minden szóhoz, így az összes szöveg ugyanazt a szélességi területet foglalja el, függetlenül a sorban lévő szavak számától.

28. Blokkmegjelenítés típusának kiválasztása CSS3 segítségével

Négyféle blokkmegjelenítés: kép három oszlopban leírással, kép leírással egy oszlopban, csak képek, csak szöveges leírás. A blokkok megjelenítési típusának váltásához a felül lévő ikonokat kell használnia.

Lehetővé teszi olyan sablonok használatát, amelyek megkönnyítik a HTML-elemek létrehozását JavaScript adatobjektumokból.

A félreértések elkerülése végett szeretném figyelmeztetni, hogy ez a modul nincs aktívan fejlesztve vagy jelenleg karbantartva, és a jQuery fejlesztőcsapata nem javasolja a használatát. Ez nem jelenti azt, hogy ne használja, de kötelességemnek éreztem, hogy beszéljek róla, mielőtt beépítené a projektjeibe. Szívesen ajánlok egy másik, aktívan fejlesztett opciót, de nem sikerült olyan helyettesítőt találnom a jQuery Templates számára, amely még csak megközelítette volna. De még a fejlesztők említett hozzáállása mellett is ez a modul a legjobb.

A jQuery Templates modul története meglehetősen szokatlan. Akkoriban a Microsoft és a jQuery fejlesztőcsapata bejelentette, hogy három, a Microsoft által kifejlesztett beépülő modul "hivatalos" státuszt kapott, amit korábban egyetlen plug-in sem kapott.

Nem sokkal később a jQuery csapata bejelentette, hogy megszüntetik ezeket a modulokat és eltávolítják őket hivatalos státuszukból, valamint azt tervezik, hogy más funkciókkal cserélik le őket. A tervezett csere a jQuery UI könyvtár része volt. Sajnálatos, de igaz, hogy még semmi sem valósult meg, amit ígértek, és az elavult beépülő modulok továbbra is elérhetők és széles körben használatosak (különösen a sablonok bővítménye).

Nyilván mindenki maga dönti el, hogy használ-e elavult kódot vagy sem, de én személy szerint szeretem a sablonok által biztosított funkciókat, és gyakran használom is őket. Ennek során azt feltételezem, hogy bármikor megnézhetem a forráskódot, és megoldhatok bármilyen komoly problémát, ha az felmerül, és néha még mindig meg kell találni a megoldásokat a kisebb nehézségek leküzdésére, ez megtérül azokkal az előnyökkel, amelyeket a sablonok biztosítják..

A jQuery Templates Library beállítása

A jQuery sablonok használata előtt le kell töltenie a jQuery Templates könyvtárat, és bele kell foglalnia a dokumentumába.

Csomagolja ki az archívumot, és másolja a jQuery.tmpl.js (fejlesztési verzió) vagy a jQuery.tmpl.min.js (telepítési verzió) fájlt a webkiszolgálóra. A következő teendő az, hogy hozzáad egy szkriptelemet a mintadokumentumhoz, amely tartalmazza a sablonkönyvtárat, az alábbi példában látható módon:

Virágbolt

Ezt a kódot mintadokumentumként használjuk ebben a cikkben. Észrevehette, hogy nemcsak abban különbözik a korábban tárgyalt eredeti verziótól, hogy sablonkönyvtárat adtak hozzá, hanem abban is, hogy a különféle virágtermékeknek megfelelő elemeket eltávolították belőle. Ez kifejezetten azért történik, hogy a sablonkönyvtár segítségével különféle módokon visszaállíthassuk ezeket az elemeket a dokumentumban.

A forrásdokumentum megjelenése a böngészőablakban ebben a szakaszban az ábrán látható:

Egy egyszerű adatsablon példa

Az adatminták megismerésének legjobb módja, ha rögtön beleugrik. A sablonok főbb jellemzőinek bemutatásához az alábbi példa kódját használjuk:

... ...

A következő szakaszokban a példát külön részekre bontjuk, és mindegyikhez külön elemezzük a kódot. Ha az adat egy dokumentum részét képezi, azt inline adatnak nevezzük. Az alternatíva a távoli adatok, amelyeket a szerveren tárolnak a dokumentumtól elkülönítve. Kicsit később megnézzük a távoli adatokat, de most észreveheti, hogy ez a probléma szorosan összefügg a jQuery könyvtár által biztosított Ajax támogatással.

Adatdefiníció

A példa az adatok meghatározásával kezdődik. Esetünkben az adatok objektumok tömbje, amelyek mindegyike egy-egy virágtermesztési típust ír le. A vonatkozó kódrészlet alább található:

Var data = [ ( név: "Astra", termék: "astor", készletszint: "10", ár: 2,99), ( név: "Narcissus", termék: "nárcisz", készletszint: "12", ár: 1,99 ), ( név: "Rose", termék: "rózsa", készletszint: "2", ár: 4.99), ( név: "Peony", termék: "bazsarózsa", készletszint: "0", ár: 1.50), ( név: "Primula", termék: "primula", készletszint: "1", ár: 3.12), ( név: "Hóvirág", termék: "hóvirág", készletszint: "15", ár: 0.99), ];

Az adatok egy vagy több JavaScript objektumként vannak kifejezve. A jQuery sablonkönyvtár nagy rugalmasságot biztosít az adatként használható objektumok kiválasztásában, de a fent látható formátum megegyezik az adatok formátumával. JSON, a leggyakoribb. A JS0N formátum nagyon fontos, mert gyakran használják az Ajax-szal.

Ebben a példában a tömb hat objektumból áll, amelyek mindegyike egy adott terméket leíró tulajdonságkészlettel rendelkezik: megjelenített név, terméknév, elérhető egységek száma és ár.

Sablon meghatározása

Amint azt valószínűleg sejtheti, a sablonkönyvtár központi eleme az adatsablon. Ez HTML-elemek halmaza, amelyek helyőrzőket tartalmaznak, amelyek megfelelnek az adatobjektumok különféle tulajdonságainak. A példa sablonja az alábbiakban látható:

Az első dolog, amit észre kell venni, hogy a sablon egy olyan script elembe kerül, amelynek type attribútuma nem létező típusú értékre van beállítva - text/x-jquery-tmpl. Ez megakadályozza, hogy a böngésző megpróbálja a sablon tartalmát normál HTML-jelölésként értelmezni. Bár nem elengedhetetlen, ezt a gyakorlatot érdemes követni, mivel rendkívül előnyös, és lehetővé teszi, hogy a jövőben elkerülje a lehetséges problémákat.

A második pont, amire fel szeretném hívni a figyelmet, az az, hogy az id attribútumot a script elemben meghatározott sablon elnevezésére használják. Ebben az esetben a sablon neve virágTmpl. Ha sablont szeretne alkalmazni az adatokra, ismernie kell a nevét.

A sablon tartalma az adatkészletben lévő összes objektumra lesz alkalmazva, így minden objektumhoz egy HTML-elemkészlet jön létre. Látható, hogy a sablon szerkezete általában megfelel azoknak az elemeknek, amelyeket a korábbi cikkekben használtak a virágtermékek különböző típusainak ábrázolására. A fő különbség közöttük a helyőrző (adathelyőrző) funkciót ellátó kódelemek jelentik.

A sablonfeldolgozás során minden helyőrzőt az aktuális objektumból vett tulajdonság értékével helyettesítünk. Például az első tömbobjektumnál a $(product) helyőrző be lesz cserélve a termék tulajdonság értékére, pl. "asztor". Tehát a minta része

$(név):

a következő HTML kódrészletre konvertálva:

Őszirózsa:

Az értékhelyettesítés nem az egyetlen dolog, amit a sablonok tehetnek. Az egyéb lehetőségeket alább tárgyaljuk.

Sablon alkalmazása

A sablon adatokkal való kombinálásához használja a tmpl() metódus. Ennek során megadja a használni kívánt adatokat és a rájuk alkalmazandó sablont. Az alábbiakban látható egy példa ennek a módszernek a használatára:

$("#virágTmpl").tmpl(data).appendTo("#sor1");

Itt az erre a célra szolgáló $() függvény segítségével kiválasztjuk a sablont tartalmazó elemet, és az eredményre meghívjuk a tmpl() metódust, argumentumként átadva neki a feldolgozni kívánt adatokat.

A tmpl() metódus egy szabványos jQuery objektumot ad vissza, amely tartalmazza a sablonból lekért elemeket. Ebben az esetben ez div elemkészletet eredményez, amelyek mindegyike img, label és bemeneti elemeket tartalmaz, amelyek az adattömbben található objektumok egyikéhez vannak konfigurálva. Ha a teljes halmazt a row1 elem gyermekeként szeretné beszúrni, használja az appendTo() metódust. Az eredmény az ábrán látható:

Eredmény módosítás

Az eredmény nem teljesen kielégítő, mivel a különböző színeknek megfelelő összes elem egy sorban jelenik meg. De mivel egy jQuery objektummal van dolgunk, nem nagy dolog az elemeket úgy pozícionálni, ahogyan szeretnénk. Az alábbi példa bemutatja, hogyan lehet ezt megtenni a tmpl() metódus eredményének befolyásolásával:

... $("#virágTmpl").tmpl(data) .slice(0, 3).appendTo("#sor1").end().end() .slice(3).appendTo("#row2" );

Ebben a példában a slice() és end() metódusok a kiválasztott elemek halmazának szűkítésére és bővítésére szolgálnak, az appendTo() metódus pedig arra, hogy sablon által generált elemek részhalmazait adja hozzá a különböző sorokhoz.

Vegye figyelembe, hogy ahhoz, hogy a halmazt visszaállítsa a slice() és appendTo() metódusok alkalmazása előtti eredeti állapotába, az end() metódust kétszer egymás után kellett meghívni. Ebben nincs semmi illegális, és szívesen használom az end() metódust, hogy megcsináljam, amit egy utasításban kell, de nem szeretem az end().end() szekvenciát. Ilyen esetekben inkább a teljes műveletsort több különálló műveletre bontom, amint az az alábbi példában látható:

Var templResult = $("#virágTmpl").tmpl(data); templResult.slice(0, 3).appendTo("#sor1"); templResult.slice(3).appendTo("#row2");

Az eredmény mindkét esetben ugyanaz lesz: egy termékgyűjtemény bemutatása két sorban, amelyek mindegyike háromféle színt jelenít meg, amint az az ábrán látható:

Módosítsa a bevitel módját

Egy másik lehetséges megközelítés az adatok tmpl() metódusba történő továbbításának megváltoztatása. A vonatkozó példa az alábbiakban látható:

Vartemplate = $("#virágTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#sor1"); template.tmpl(data.slice(3)).appendTo("#row2");

Ebben a forgatókönyvben az elemek sorokban történő elosztása a sablon kétszeri használatával történik – minden sorhoz egyszer. Az adatobjektumok megfelelő része a slice() metódussal minden alkalommal átkerül a sablonba. Annak ellenére, hogy ez a megközelítés különbözik az előzőtől, ugyanazt az eredményt kapjuk, amelyet a fenti ábra mutatott be.

Kifejezés értékelése

Az adatobjektumok nemcsak tulajdonságértékek megszerzésére használhatók. Ha egy JavaScript-kifejezést két kapcsos zárójel közé tesz, a sablonmotor kiértékeli, és beilleszti a sablon által generált HTML-kódba. A vonatkozó példa az alábbiakban látható:

Ebben a sablonban a bemeneti elem value attribútuma a készletszint tulajdonság értéke alapján van beállítva egy hármas feltételes operátor használatával. A kapcsos zárójelek közé zárt kifejezés ugyanazt a szerepet tölti be, mint a helyette írt azonnali tulajdonságérték. Ha a készletszint tulajdonság értéke nagyobb, mint nulla, akkor az értéket 1-re állítjuk, ellenkező esetben 0-ra.

Az eredményül kapott oldal nézete a böngészőablakban az alábbi ábrán látható. A pünkösdi rózsa kivételével minden színhez nullánál nagyobb készletszint van beállítva:

Ez a példa a sablonokkal való munka alapvető mintáját szemlélteti: az adatok egy sablonnal kombinálva DOM-objektumokat kapnak, amelyeket aztán a jQuery alapvető funkcióival hozzáadnak a dokumentumhoz. A tartalom generálásához közvetlenül megadott értékeket és számított kifejezéseket is használhat.

Sablonváltozók használata

A sablonok nem JavaScriptek. A script elemhez hozzáadott minden tartalom a sablon részének tekintendő, és szerepelni fog a kimenetben. A sablonok rugalmasabbá tétele érdekében néhány kontextusváltozót biztosítunk, amelyek helyőrző-leírókban használhatók. E változók rövid leírását az alábbi táblázat tartalmazza:

A $data változó használata

A $data változó azt az aktuális adatelemet adja vissza, amelyre a sablont alkalmazták. Például a használt $data változó sorra hivatkozik az egyes objektumokra, az egyes virágtípusoknak megfelelően. A sablon egy hármas feltételes operátort használt az előző példa adatainak lekéréséhez. Ez a megközelítés teljesen elfogadható, azonban a kapott sablonok olvasása gyakran okoz nehézségeket, amelyeket természetesen kívánatos elkerülni.

Mindig igyekszem minimálisra csökkenteni a sablonkódomat, ezért inkább a $data változót használom a JavaScript függvényeken belül, amelyeket aztán meghívok a sablonból. A vonatkozó bemutató az alábbiakban látható:

Ez a példa egy stockDisplay() függvényt határoz meg, amely azt az értéket adja vissza, amelyet a bemeneti elemben meg kell jeleníteni. Ennek a függvénynek az argumentuma egy adatobjektum, amelyet a $data változó segítségével kapunk meg a sablonon belül. Tekintettel arra, hogy ez csak egy egyszerű hármas operátor, a kód olvashatóságának különbsége az előző verzióhoz képest nem túl jelentős, de összetettebb kifejezések esetén, vagy ugyanazon sablonon belüli kifejezés ismételt használata esetén sokkal észrevehetőbb lesz.

A sablonból meghívandó függvények meghatározásakor legyen óvatos. A lényeg az, hogy az ilyen függvényeket a tmpl() metódus meghívása előtt meg kell határozni. Mindig igyekszem a script elem végére tenni, de ha a függvénynek egy kész eseménykezelőben kell lennie, akkor mindenképpen győződjön meg arról, hogy korábban definiálta. Egy másik gyakori hiba, hogy egy függvényt gyakran egy sablonon belül határoznak meg.

A $() függvény használata egy sablonon belül

Használhatja a jQuery $() függvényét a sablonon belüli helyőrzőkhöz, de fontos megjegyezni, hogy a sablon által generált elemek nincsenek csatolva a dokumentumhoz, ezért nem kerülnek bele a jQuery kiválasztási készleteibe. Ritkán használom ezt a funkciót, mert általában jobban érdekelnek az általam generált elemek és a hozzájuk tartozó adatok.

A $item változó használata

A $item változó által visszaadott objektum számos dolgot csinál. Az első az, hogy lehetővé tegye a további adatok cseréjét a JavaScript-szkript és a sablon között. A vonatkozó példa az alábbiakban látható:

Ebben a példában létrehozunk egy opciós objektumot, amely meghatároz egy tulajdonságot (discount) és egy metódust (stockDisplay()). Ezt az objektumot ezután a tmpl() metódus adja át második argumentumként. Az objektum tulajdonságaihoz és metódusaihoz a sablonból való hozzáférést a $item változó biztosítja. Mint látható, az árengedmény kezeléséhez itt az opciók objektum diszkont tulajdonságát használjuk.

Szeretném felhívni a figyelmet arra, hogy a kontextusváltozók neveibe a $ előtagot is bele kell foglalni: $item és $data. Ugyanezt az előtagot kell megadni a $(...) sablonleíró konstrukcióban is, amely értékeket helyettesít a sablonban. Ezen előtagok bármelyikének elhagyása az egyik leggyakoribb hiba.

Ennek az objektumnak a további felhasználásairól később fogunk beszélni.

Beágyazott sablonok használata

Összetett alkalmazások létrehozásakor néha érdemes egy nagy sablont több részre bontani, amelyeket már az alkalmazás végrehajtási szakaszában egyesítenek. Amint azt később látni fogjuk, a sablonok kombinálásának ez a módja rugalmasabb kimenetvezérlést tesz lehetővé. Kezdjük a legalapvetőbbvel. Az alábbi példa bemutatja, hogyan hivatkozhat egy sablon egy másikra:

...

Ebben a példában a sablon két részre van osztva. Az első, a flowerTmpl sablon az adattömb minden eleméhez meghívódik. Ez a sablon viszont meghívja az inputTmpl sablont a bemeneti elemek létrehozásához. A második sablont a leíró segítségével hívjuk meg ((tmpl)). Ez a felhívás három érvet tartalmaz. Az első kettő az aktuális elem és az opciók objektum; ezek az érvek zárójelben vannak. A harmadik argumentum a meghívandó sablon. Beállítható egy jQuery választóval (ahogyan fentebb), vagy a szkriptben definiált változóval vagy függvénnyel.

Feltételes sablonok használata

A sablonmotor lehetővé teszi a dinamikus döntések meghozatalát a sablon különböző részeinek használatával kapcsolatban, bizonyos feltételek teljesülésétől függően. Erre valók a leírók. ((ha))és ((/ha)), amelyre az alábbiakban egy példa látható:

... ((ha készletszint > 0))

A feltétel a ((ha)) leíróban van megadva, és a sablon e leíró és a ((/ha)) leíró közé zárt része csak akkor kerül felhasználásra, ha a feltételes kiértékelés igaz. Ha ez az eredmény hamis, akkor a rendszer figyelmen kívül hagyja a sablon megadott részét. Ebben az esetben a stocklevel tulajdonság értéke ellenőrzésre kerül, és ha az nulla, akkor a teljes flowerTmpl sablon figyelmen kívül marad. Ez azt jelenti, hogy csak a raktáron lévő termékek jelennek meg, ahogy az az ábrán is látható:

A leíró segítségével bonyolultabb feltételek is megadhatók ((más)), amely lehetővé teszi a sablon azon részének megadását, amelyet azokban az esetekben kell használni, amikor a leíróban ((ha)) lévő kifejezés kiértékelésének eredménye hamis. A vonatkozó példa az alábbiakban látható:

... ((ha készletszint > 5))

Ebben a forgatókönyvben a megjelenített cikkkészletet az határozza meg, hogy egy adott árutípusból hány cikk van készleten: ötnél több, öt, ötnél kevesebb vagy egyáltalán nincs. Csak kisebb különbségeket mutattam be az egyes feltételekhez generált elemek között, de ezekkel a funkciókkal teljesen más tartalmat hozhat létre. Végül szükség esetén más sablonok is feltételesen meghívhatók.

A fenti szkript eredménye az ábrán látható:

A jQuery megjelenésével a fejlesztők élete sokkal könnyebbé vált. Például könnyen megtehetjük a következőket:

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

Ez a kód a #someElement azonosítójú elem összes gyermekét egy címkébe helyezi