Oficialūs jQuery papildiniai: Šablonų papildinys. Mokymasis dirbti su jQuery šablonais Šaunūs ryškūs jQuery ir CSS3 patarimai

Spustelėkite norėdami sužinoti daugiau:

Išleidus jQuery, kūrėjų gyvenimas tapo daug lengvesnis. Pavyzdžiui, galime lengvai atlikti šiuos veiksmus: $("#someElement").children().each(function() ( $(this).wrap($("")); )); Šis kodas į žymą įtrauks visus elemento, kurio ID #someElement, palikuonis. Tokiose operacijose nėra nieko blogo; Ši išraiška yra visiškai teisinga ir kai kuriose situacijose yra labai patogi. Tačiau į mūsų scenarijų įdėtas HTML kodas yra kodo struktūrinės logikos pažeidimas. Šiame paprastame pavyzdyje šis pažeidimas nėra reikšmingas, tačiau realiuose projektuose jis yra labai dažnas. Paprastai tokiame kode yra daug HTML fragmentų, kurie yra integruoti į DOM, gavus duomenis iš AJAX užklausų. Šis stilius gali greitai virsti tuo, kas itin neįskaitoma. Šablonų naudojimas leis mums pašalinti šį trūkumą, atskiriant HTML fragmentus nuo scenarijų, taip atskiriant skirtingų tipų kodų turinio logiką. Pakeliui negaliu neparodyti jums puikių naujų AJAX funkcijų, kurias pristatė jQuery 1.5. Pradėti Šiame pavyzdyje kursime „Twitter“ valdiklį, kuris įkels ne tik naujausius mūsų įrašus, bet ir draugų bei sekėjų sąrašą. Šiam pavyzdžiui pasirinkau „Twitter“, nes jis sąveikauja su JSON duomenimis, su kuriais lengva ir smagu dirbti. Pradėkime; pats valdiklis bus sukurtas remiantis tokia HTML struktūra: jQuery, AJAX ir šablonai Danas Wellmanas Vyras, tėvas, front-end kūrėjas ir autorius. Rašo „Nettuts“ ir „Packt Publishing“. Dirba @designhaus | jQuery fanatikas Tweets Draugai Sekėjai Šis valdiklis turi puikių funkcijų, kurioms reikia naudoti JavaScript. Įjunkite jį, kad galėtumėte naudotis geresne interneto patirtimi Šiame pavyzdyje mes naudojame HTML5. Norėdami tai padaryti, nurodėme supaprastintą DOCTYPE ir meta elementą. Taip pat kode galite pastebėti ryšį su stiliaus lapais, kurie bus aprašyti po kelių minučių. Siekdami palaikyti dabartinę IE8 ir senesnę versiją, naudojame sąlyginius komentarus specialiame html5shiv papildinyje. Naudojant į šoną Greičiausiai šis valdiklis atrodys kaip šoninė juosta ir rodys nurodyto Twitter vartotojo turinį. Atsižvelgdamas į tai, nusprendžiau sudėti turinį į . Norėdami lengvai pasiekti šį elementą, nustatysime jam ID. Kalbant apie žymėjimus. Visi Twitter vartotojo įrašų pavadinimai bus įtraukti į žymą, o vaizdas ir visa kita bus įtraukta į žymą Galite pakeisti tai savo nuožiūra, kai apversiate šį pavyzdį. Visus reikiamus duomenis galėtume gauti per JSON, ką ir padarysime, tačiau užsitęsus įkėlimo procesui lankytojui bus rodoma daug tuščių blokų. Taigi geriau palaukti, kol atsisiuntimas bus baigtas, ir tada užpildyti blokus. Puslapyje taip pat bus skirtukai, skirti perjungti pranešimų, draugų ir prenumeratorių sąrašus. Visi jie bus įtraukti į etiketes , Ir . Įrašų sąrašo skirtukas bus rodomas pagal numatytuosius nustatymus, todėl aktyviam skirtukui turime pateikti pasirinktinę CSS klasę. Didesniame projekte būtų geriau naudoti jQuery sąsajos skirtukams perjungti, bet nenorėjau sutelkti dėmesio į tai, nes... Pamokos tema kitokia. Galiausiai turime viską, ko reikia, kad patalpintume visus gaunamus duomenis: išorinį konteinerį su ID, tris skirtukus žinutėms, draugus ir sekėjus, kurie taip pat turi savo ID, kad būtų lengviau atrinkti. Taip pat pridėjome elementą tiems lankytojams, kurie nenaudoja JavaScript žiūrėdami tinklalapius. Atminkite, kad naudosime tmpl papildinį, kuris suteiks mums galimybę naudoti jQuery šablonus. Šį papildinį galima atsisiųsti. Kiek anksčiau minėjau specialius stiliaus lapus. Atidarykite naują failą mėgstamoje teksto rengyklėje ir pridėkite šį kodą: #tweetbox ( ekranas: blokas; plotis: 300 tšk.; užpildymas: 10 tšk.; kraštinė: 1 piks. vientisas #aaa; -moz-border-radius: 5px; border-radius: 5px; šriftų šeima: "Trebuchet MS", Arial, Helvetica, sans-serif; background-color:#eee; ) #tweetbox img ( display:block; ) #user ( margin-bottom:10px; float:left; ) #user h2 ( margin:0 0 10px 0; position:relative; šriftas img ( ekranas: blokas; paraštė dešinėje: 10 tšk.; kraštinė: 3 piks. vientisas #333; ) # įrankiai ( paraštė: 0; * paraštė - apačia: -10 pikselių; užpildymas: 0; aiškus: abu; sąrašo stiliaus tipas: nėra ; ) #tools li ( float:left; ) #tools a ( ekranas: blokas; aukštis: 20 piks.; užpildymas: 3 piks. 24 piks.; kraštinė: 1 piks. vientisas #aaa; kraštinė-apačia: nėra; -moz-border-radius: 5px 5px 0 0; kraštinės spindulys: 5 piks. 5 tšk. 0 0; paraštės dešinė: -1 piks.; padėtis: santykinis; šrifto dydis: 14 piks.; kontūras: nėra; fono spalva: # d6d6d6; fono vaizdas: -webkit-gradient (linijinis , kairysis viršuje, kairėje apačioje, color-stop(0,5, #E8E8E8), color-stop(0, #DBDBDB), color-stop(0,5, #D6D6D6)); background-image: -moz-linear-gradient(centre viršuje, #E8E8E8 50%, #DBDBDB 0%, #D6D6D6 50%); ) a ( text-decoration:none; color:#333; ) #tools .on (aukštis:21px; margin-top:-1px; top:1px; ) #feed ( plotis:298px; border:1px solid #aaa; clear:abi; fono spalva:#d6d6d6; ) #feed > div ( display:none; ) noscript ( display:block; padding: 10px; font-size:13px; color:#333; ) Išsaugokite šį failą kaip tweetbox.css tame pačiame kataloge kaip ir jūsų HTML puslapiai. Tai tik nedidelė suma, kurią galime nurodyti savo valdiklio dizainui. Ką tik pateiktame kode galite pastebėti keletą CSS3 gudrybių: suapvalintus kampus (atminkite, kad šiems tikslams mums nebereikia -WebKit-!), taip pat kai kuriuos skirtukų gradientus. Pažymėtina, kad paslepiame visus blokus, išskyrus vieną – aktyvųjį. Šiuo metu valdiklis turėtų atrodyti taip: Scenarijaus pridėjimas Dabar parašykime nedidelį scenarijų skirtukų perjungimui įgyvendinti. Sukurkite naują failą ir pridėkite šį kodą: (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("#"); tweetbox.find(.on").removeClass("on"); nuoroda .addClass("on"); tweetbox.find("#feed > div").hide(); tweetbox.find("#" + target).show(); )); ))(jQuery); Išsaugokite šį failą (tweetbox.js) tame pačiame kataloge kaip ir visa kita. Čia nėra nieko sudėtingo. Skirtukai nėra šios pamokos esmė, todėl per ilgai prie jos neužsibūsiu. Scenarijus veikia taip: naudojame anoniminę funkciją, kuri užfiksuoja aktyvų konteinerį. Taip pat inicijuosime tris kintamuosius, kuriuos naudosime vėliau. Nustatome jų vertę į nulį. Elementai bus atrenkami pakartotinai, todėl nebus nereikalinga viso dalyko laikyti talpykloje, o tai padės sumažinti „jQuery“ užklausų skaičių. Tada neaktyviuose skirtukuose įdiegiame paspaudimų tvarkyklę ir nustatome atitinkamas klases, kad būtų rodomi stiliai. Kitaip tariant, aktyvų skirtuką padarome neaktyvų, o vienas iš neaktyvių skirtukų yra aktyvus. Prieš rodydami pasirinkto skirtuko turinį, mes juos visus paslepiame ir tik tada rodome informaciją. Duomenų gavimas Dabar linksmybės prasideda. Pateiksime užklausą „Twitter“, kad gautume visų 3 skirtukų duomenis, taip pat naudosime papildinį, kad galėtume naudoti „jQuery“ šablonus. Pridėkite šį kodą po ankstesnio: $.ajaxSetup(( dataType: "jsonp" )); function getTweets() ( $.ajax("http://api.twitter.com/statuses/user_timeline/danwellman.json", ( sėkmė: 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; } }); } $.when(getTweets(), getFriends(), getFollows()).then(function(){ // используем шаблоны }); Pirmiausia naudojame metodą ajaxSetup() norėdami nurodyti duomenų formatą, su kuriuo turėsime reikalų – jsonp. Kadangi vykdysime kelias užklausas, geriau šią reikšmę nurodyti vieną kartą. Toliau parašome 3 standartinius funkcionalumo požiūriu metodus, kuriuose naudojame atskirus ajax() metodus. Ji pateiks užklausą „Twitter“ paslaugai ir grąžins duomenis. Užklausai naudosime specialius raktinius žodžius: user_timeline, draugai ir sekėjai. Norėdami būti tikri, kad duomenys bus sugeneruoti po sėkmingos užklausos, įtrauksime savo kodą į sėkmės bloką. Kiekviena iš šių funkcijų pateiks 100 gerai supakuotų „Twitter“ duomenų objektų. Krokui mums nereikia tiek daug duomenų, todėl į masyvą įdėsime tik 5 objektus. Norėdami įsitikinti, kad JSON duomenis generuojame tinkamu formatu, kiekvieno elemento raktus įdedame į dvigubas kabutes. Šios funkcijos yra beveik identiškos viena kitai. Atkreipkite dėmesį, kad kiekvienai užklausai naudojame savo unikalius raktinius žodžius. Kiekvienos funkcijos pabaigoje sukauptus masyvus priskiriame elementams, kuriuose buvo nulinės reikšmės (suformuotos aukščiau). Atkreipkite dėmesį, kad mes ne tik iškviečiame savo tris metodus – naudojame metodą when(), kuris paleis jo turinį tik pasibaigus trijų metodų vykdymui. Po to, kai visos trys funkcijos grąžins sėkmę, paleisime tada () metodą, kuriame bus šablono funkcionalumas. Beje. Šiame kontekste taip pat galite nurodyti fail() metodą, kuris bus paleistas, jei „Twitter“ užklausos nepavyks. Visa tai labai šaunu, nes ankstesnėse „jQuery“ versijose tokios funkcijos nebuvo. Antrinės funkcijos Ankstesniame pavyzdyje naudojame kai kurias pagalbines funkcijas convertDate() ir breakTweet(). Štai jų turinys: //datos formatas convertDate = funkcija(obj, i) ( if (langas.ActiveXObject) ( obj[i].created_at = obj[i].created_at.replace(/[+]\d(4)/, "") ; ) var days = ["sekmadienis", "pirmadienis", "antradienis", "trečiadienis", "ketvirtadienis", "penktadienis", "šeštadienis"], data = nauja Data(obj[i].created_at), formattedTimeStampArray = .created_at], data.toLocaleDateString(), data.toLocaleTimeString()]; grąžinti formattedTimeStampArray.join(" "); ) breakTweet = function(obj, i) ( var text = obj[i].text, brokenTweet = , atExpr = /(@[\w]+)/; if (text.match(atExpr)) ( var splitTweet = text.split(atExpr); for (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() funkcija: Pirmiausia patikriname, ar naršyklė nenaudoja window.ActiveXObject. Jei taip, mes naudojame JavaScript pakeisti() metodą, kad pašalintume laiko juostą, esančią JSON objekte, grąžintame iš Twitter. Šis metodas naudoja reguliarius posakius, kad surastų ir pakeistų eilutę. Toliau sukuriame keletą kintamųjų; masyvas, kuriame yra sutrumpinti mėnesių pavadinimai. „JavaScript“ datų dienos prasideda nuo 0. Tada sukuriame Date objektą naudodami naują Date( konstruktorių ir perduodame datą, kuri saugoma funkcijai perduoto objekto ypatybėje Created_at. Sukurkime dar vieną masyvą iš 3 elementų: pirmasis – savaitės diena, antrasis – lokalizuota data, trečias – lokalizuotas laikas. Suformavus masyvą, jį grąžiname. Funkcija breakTweet () yra šiek tiek sudėtingesnė. Čia turime konvertuoti paprastą tekstą į JSON masyvą, kuriame kiekvienas elementas yra objektas, turintis pavadinimo arba teksto ypatybes. Jie bus naudojami šablone. Pirmiausia gauname tekstą iš objekto, kurį Twitter mums grąžino (perdavėme jį funkcijai). Čia taip pat naudojame reguliariąją išraišką, kuri užfiksuoja @usernames buvimą. Toliau nuskaitome tekstą, kad surastume vartotojo vardą; jei yra, išimkite. Gauname teksto reikšmių masyvą. Einame per šį masyvą, ieškodami testo, kuriame yra simbolis @; Jei šis simbolis yra, parašykite jį mygtuku Vardas. Likusi teksto dalis rašoma teksto klavišu. Sugeneruoti objektai dedami į masyvą. Tai viskas. Ką tik sukūrėme objektą, kurį galime perduoti jQuery šablonui. Darbas su šablonu Dabar, kai sugeneruoti visi reikalingi duomenys, galime pereiti prie paskutinės pamokos dalies: šablonų. Grįžkime prie tada() metodo bloko turinio. Įklijuokite kodą į šį bloką: //taikyti šablonus tweetbox.find("#tweetTemplate").tmpl(tweetData).appendTo("#tweetList"); tweetbox.find("#ffTemplate").tmpl(draugo duomenys).appendTo("#draugų sąrašas"); tweetbox.find("#ffTemplate").tmpl(followData).appendTo("#followList"); //rodyti pranešimus tweetbox.find("#tweets").show(); Čia demonstruoju tmpl() papildinio naudojimą. Šiame fragmente mes perduodame sugeneruotus duomenis į šabloną, nurodydami, kuris elementas juos gaus. Metodas tmpl() iškviečiamas kiekvienam elementui, kurio dar nesukūrėme. Taigi pridėkime juos. jQuery šablonų pridėjimas Dar kartą grįžkime prie HTML. Pirmas dalykas, kurį padarysime, yra pridėti žymą iškart po tuščio ul su ID „tweetList“: ((kiekvienas tekstas)) ((jei vardas)) ((tmpl(Name) "#atTemplate")) ((else)) $(Text) ((/if)) ((/kiekvienas)) $(laiko žyma) $($item.data) jQuery šablonai pridedami prie HTML puslapio tiesiai per . Kiekvienas toks elementas turi turėti id elementą, kad jį būtų galima atpažinti ir apdoroti tmpl() metodu. Tipo atributas taip pat turi saugoti šią reikšmę - text/x-jquery-tmpl. Pirmajame šablone pridedame struktūrą, kurią vėliau norime rodyti DOM. Visų pirma, kiekvienas „Twitter“ pranešimas bus įtrauktas į žymas, IR . Norėdami įterpti duomenis iš JSON objekto, perduodamo naudojant tmpl() metodą, naudojame šablono žymų seriją. Tada mes naudojame ((kiekvienas)), norėdami pakartoti kiekvieną elementą, saugomą masyve. Šiame masyve yra visi „Twitter“ pranešimai. Kiekviename iš jų patikriname, ar yra Vardo raktas. Jei raktas yra, naudokite ((tmpl)) žymą. Skliausteliuose po tmpl nurodome funkcijos, per kurią bus perduoti duomenys, pavadinimą, taip pat nurodome šablono, kurį naudosime, ID (plačiau pažiūrėsime po kelių minučių). Jei objekte nėra pavadinimo klavišo, tai yra paprastas tekstas, kurį įterpsime naudodami $(text). Ši sąlyga pasiekiama naudojant ((if)) ir ((else)) žymas. Po to turime uždaryti sąlygą naudodami ((/if) ir panašiai užbaigti kilpą ((/foreach)). Dabar turime sukurti nuorodą, kuri nukreiptų tiesiai į „Twitter“. Norėdami tai padaryti, naudojame $(tweetlink) kaip href atributo dalį ir $(timestamp) ypatybę. Tai yra duomenys, kuriuos sukūrėme ir sėkmingai apdorojome naudodami user_timeline užklausą. Taip pat turime sukurti skirtukus, kad būtų rodomi mūsų draugai ir sekėjai. Juos kursime lygiai tokiu pačiu principu. Kiekvienam yra viena bazė: $(ekrano vardas)$(mažėjimas) Taigi sužinojome, kaip perkelti duomenis į šabloną naudojant json ir išvesti juos naudojant $(data); Apdailos prisilietimas Dabar, kai viskas beveik paruošta, galime pridėti dar keletą CSS stilių, kad viskas atrodytų daugiau ar mažiau padoriai. Pridėkite šį kodą prie tweetbox.css failo pabaigos: #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:passt-child p ( kraštinė-apačia:nėra; ) #feed p ( užpildymas:10px; paraštė:0; kraštinė-apačia:1px solid #eee; background-image:-webkit-gradient(linijinis) , kairėje apačioje, kairėje viršuje, spalvos sustabdymas (0,48, #c2c2c2), spalvos sustabdymas (0,71, #d6d6d6)); fonas vaizdas:-moz-linear-gradient(centre apačioje, #c2c2c2 48%, #d6d6d6 71 %); ) #feed p:after ( turinys:""; ekranas: blokas; plotis: 100%; aukštis: 0; aiškus: abu; ) .tweet-link ( ekranas: blokas; paraštė viršuje: 5 pikseliai; spalva: #777; ) .img-link ( display:block; margin:4px 10px 0 0; float:left; ) #feed .username a ( šrifto dydis:14px; šrifto svoris: paryškintas; ) #feed .bio ( ekranas :blokas; paraštė viršuje: 10 pikselių; ) Išsaugojus failą, mūsų programa atrodys taip: Yra dar vienas dalykas, kurį turėtume įgyvendinti: šiuo metu mūsų formatavimas neveikia IE, nes IE nepalaiko split() metodo. Norėdami išspręsti šią problemą, galime naudoti puikų „JavaScript“ pataisą, kurį sukūrė Stevenas Levithanas. Jį galima atsisiųsti iš: http://blog.stevenlevithan.com/archives/cross-browser-split. Sujunkite šį kodą naudodami sąlyginį komentarą: Šis kodas turi būti pridėtas prieš pat įtraukiant failą tweetbox.js. Išvada Šiame vadove apžvelgėme kai kurias pažangesnes „jQuery“ šablonų funkcijas. Buvome supažindinti su iteracine kilpa ((kiekvienas)) ir sąlygomis ((jei)) ir ((else)). Svarbiausia yra tai, kad nauja „jQuery“ šablonų sistema leidžia mums padalinti kodą, perkeliant visus HTML fragmentus iš JS failų ir atgal į HTML failą. Kai kas gali ginčytis, kad dabar tiesiog didiname žymų skaičių savo puslapyje. Tačiau manau, kad ši alternatyva yra priimtinesnė. $("") formato elementai yra tiesiog eilutės (žinoma, kol naršyklė nebus paleista ir jie bus sukurti bei įterpti į DOM). Taip pat pažvelgėme į naująjį kada() metodą, pridėtą prie JQuery 1.5, kuris leidžia valdyti daugybę asinchroninių užklausų. Toliau naudojome then() metodą. Šios funkcijos turinys bus paleistas tik pasibaigus visiems asinchroniniams procesams. Tikiuosi, kad straipsnis buvo jums naudingas. Ačiū už dėmesį. 2010 m. spalio 4 d. buvo paskelbtas pranešimas apie tris jQuery įskiepius, sukurtus padedant Microsoft komandai. Šie įskiepiai – „jQuery Templates“ įskiepis, „jQuery Data Link“ papildinys ir „jQuery Globalization“ papildinys – yra pažymėti kaip „oficialiai palaikomi jQuery projekto papildiniai“. Šablono papildinys naudojamas, kai puslapio žymėjime reikia rodyti duomenų objektą arba objektų masyvą. Duomenų susiejimo papildinys reikalingas norint susieti objektus su puslapio elementais ir sinchroniškai keisti reikšmes. Globalizacijos įskiepis leidžia puslapyje pagal esamos kalbos formatą rodyti tokius duomenis kaip skaičiai, data ir laikas, pinigų suma ir kt. Pažymėtina, kad Microsoft komanda, kaip ir jQuery projekto komanda, panaudojo savo didelę patirtį šiose srityse, ir su nusistovėjusia sąveika, mano nuomone, jie pasirodė kaip puikūs įrankiai kūrėjams. Patvirtindamas savo nuomonę galiu pridurti, kad jQuery kūrėjai paskelbė apie šablonų ir duomenų surišimo įskiepių įtraukimą į pagrindinę jQuery biblioteką jau 1.5 versijoje, o globalizacijos įskiepį į atitinkamą jQuery UI versiją. Papildiniai dar negavo išleidimo būsenos, tačiau svetainėje jau aktyviai rašoma dokumentacija. Beje, „Microsoft“ komanda laikėsi „jQuery“ kūrimo tradicijų ir medžiagą apie įskiepių kūrimą paskelbė github.com, kur galima rasti priedų aprašymus ir šaltinio kodus. Šiame straipsnyje šiek tiek pakalbėsiu apie šablono papildinį. jQuery šablonų papildinys Pradėkime nuo paprasto pavyzdžio: $(Vardas) ($(ReleaseYear)) var movies = [ ( Pavadinimas: "Raudonasis smuikas", Išleidimo metai: "1998"), ( Pavadinimas: "Plačiai užmerktos akys", Išleidimo metai: "1999"), ( Pavadinimas: "Paveldėjimas", Išleidimo metai: "1976") ]; $("#movieŠablonas").tmpl(filmai) .appendTo("#movieList"); Taigi pavyzdyje puslapio kūrėjas aprašė šabloną objektams rodyti žymėjimo pavidalu (pirmasis elementas scenarijus), tada iš kažkur gavau daugybę objektų filmai ir iškvietė nurodymą sugeneruoti reikiamą žymėjimą pagal šabloną, paimant duomenis iš pateikto objektų masyvo ir rezultatą įtraukiant į sąrašo pabaigą #filmų sąrašas . Paleidus papildinį gausime tokį žymėjimą: Raudonasis smuikas (1998) Plačiai užmerktos akys (1999) Paveldėjimas (1976) O dabar prie klausimo esmės. Ką daro įskiepis? Papildinys kaip įvestį gauna šablono eilutę ir objektų rinkinį (arba vieną objektą), kuriuos reikia išvesti į eilutę (arba žymėjimą) su formatavimu. Kur tai taikoma? Šis įskiepis daugiausia naudingas dinamiškai atvaizduojant JS objektus puslapyje; objektus galima gauti įvairiais būdais, pavyzdžiui, atliekant skaičiavimus arba dėl kai kurių vartotojo veiksmų ir, žinoma, dažniausiai minimas pavyzdys yra JSON forma serverio atsakyme į AJAX užklausą . Įskiepių metodai .tmpl([ duomenys ], [ parinktys ]) Gauna pirmojo pasirinkto elemento turinį ir naudoja jį kaip šabloną nurodytų duomenų formatuotai išvestiei. duomenis– duomenys, kurie turi būti išvesti į šabloną (objektas arba objektų masyvas). galimybės– pasirenkamas, vartotojo apibrėžtas plėtinys raktų ir reikšmių porų pavidalu išvesties objektui šablone. jQuery.tmpl(šablonas, [ duomenys ], [ parinktys ]) Naudoja nurodytą šabloną, kad sukurtų suformatuotą nurodytų duomenų išvestį. šabloną– duomenų formatavimo šablonas, gali būti vieno iš šių tipų: eilutė su žymėjimu, HTML elementas (įskaitant jQuery įpakavimą), eilutė, atitinkanti anksčiau sudaryto šablono pavadinimą. duomenys, parinktys– turi tą pačią reikšmę kaip aukščiau .tmplItem() Pateikia pirmojo pasirinkto elemento struktūrą (objektą) su šablono variklio rezultatais. Metodu grąžintas objektas suteikia prieigą prie: HTML dalys, sudarančios šabloną susijęs perduodamų duomenų vienetas į pirminį šabloną, jei dabartinis šablonas yra įdėtas dabartinis išvesties šablonas vartotojo apibrėžtas plėtinys (laukai ir metodai), perduotas tmpl() metodo parinkčių parametrui Šis metodas naudojamas, pavyzdžiui, kai suformatavus duomenis reikia išsiaiškinti, kokie duomenys buvo panaudoti tam tikram žymėjimui suformuoti, arba atnaujinti žymėjimo dalį naudojant naujus duomenis. jQuery.tmplItem(elementas) Panašiai kaip naudojant .tmplItem metodą, elemento ieškoma tik struktūroje su šablono variklio rezultatais elementas(HTML elementas, įskaitant „jQuery“ paketą). .template([ vardas ]) Metodas sukuria sukompiliuotą formatavimo šablono versiją iš pirmojo pasirinkto elemento turinio. vardas– pasirenkamas šablono pavadinimas, jei pavadinimas nurodytas, galite jį naudoti norėdami pasiekti šį šabloną metodu jQuery.tmpl(vardas, duomenys, parinktys) jQuery.template([ vardas, ] šablonas) Metodas panašus į aprašytą aukščiau, tik čia šablonas perduodamas kaip parametras šabloną– tai gali būti eilutė, eilutė su žymėjimu, HTML elementas (įskaitant jQuery paketą). Šablono sintaksė Trumpai aprašysiu kelis pagrindinius šablono elementus; kitus tikiuosi išsamiau aprašyti kitame straipsnyje (jei bus teigiamas atsakymas į šį straipsnį) $(fieldNameOrExpression) ir ((= fieldNameOrExpression)) Leidžia į šabloną įterpti duomenų objekto lauko (ypatybės) reikšmę; jis taip pat gali būti naudojamas metodo arba js išraiškos rezultatui įterpti. Pavyzdžiui, "$(vardas)"– į šabloną įterps lauko obj.Name reikšmę ir atsižvelgiant į tai, kad Languages ​​yra objekto, kuriam priskirtas masyvas, laukas, "$(Languages.length)"– įterps šio masyvo ilgį į šabloną ir galiausiai, jei objektas turi getLanguages ​​metodą su dviem parametrais, tada „$(getLanguages(Languages, ‘ – ‘))“– šio metodo rezultatą įterps į šabloną. ((html laukasPavadinimasOrExpression)) Šablono elementas $(laukas) (arba ((= laukas))) į rezultatą įterpia nurodyto lauko reikšmę kaip tekstą, t.y. Jei eilutėje yra HTML žymų, jos bus užkoduotos, o ne konvertuojamos į žymėjimą. Jei jums reikia įterpti duomenis į šabloną HTML žymėjimo forma, turite naudoti sintaksę ((html)) . Pradedant nuo įskiepio, aš jau pakankamai apie jį sakiau, galiu tik pridurti, kad šablono sintaksė leidžia įterpti įdėtus šablonus, sąlygines instrukcijas, pasiekti kai kuriuos JS ir jQuery objektus ir dar ką nors... Visa kita yra materialu būsimam straipsniui. Šaltiniai Straipsnis parašytas remiantis žiniatinklyje rasta medžiaga. Tai daugiausia oficialių dokumentų vertimas. Originalus galite peržiūrėti šiose nuorodose: (pavyzdžiai paimti iš ten) apie autorių Mano vardas Andrejus Zaicevas, profilis zandroid forume Tai pirmas mano straipsnis šiame tinklaraštyje, tikiuosi, ir ne paskutinis Labai ačiū Genadijui už galimybę publikuoti ir naudingus patarimus rašant ir kuriant medžiagą. Pavyzdžiai 1 pavyzdys: dinamiškas taikomo šablono perjungimas lentelė ( žymeklis: žymeklis; kraštinės sutraukimas: sutraukimas; kraštinė: 2 piks. vientisa mėlyna; plotis: 300 tšk.; paraštė: 8 piks.; ) table tr ( kraštinė: 1 piks. vientisa mėlyna; spalva: mėlyna; fono spalva: # f8f8f8; ) lentelė td ( padding:3px; ) table tr:hover ( spalva:raudona; ) .movieDetail (fono spalva:geltona; ) .movieDetail.row1 ( border-bottom:none; ) .movieDetail.row2 ( border-top:none; )
$(vardas)
$(vardas)
$(išleidimo metai)	Režisierius: $(Direktorius)

var movies = [ ( Vardas: "Raudonasis smuikas", Išleidimo metai: "1998", Režisierius: "François Girard" ), ( Pavadinimas: "Plačiai užmerktos akys", Išleidimo metai: "1999", Režisierius: "Stanley Kubrick"), ( Pavadinimas: "Paveldėjimas", Išleidimo metai: "1976", Režisierius: "Mauro Bolognini" ) ]; var selectedItem = null; /* Pateikite santraukos šabloną su "filmų" duomenimis */ $("#summaryTemplate").tmpl(movies).appendTo("#movieList"); /* Pridėkite filmo šablono elementų onclick tvarkykles naudodami santraukos arba išsamios informacijos šabloną */ $("#movieList") .delegate(".movieSummary", "click", funkcija () ( if (selectedItem) ( // Nustatyti šabloną anksčiau pasirinktame elemente // atgal į suvestinės šabloną selectedItem.tmpl = $("#summaryTemplate").template(); selectedItem.update(); ) /* Gaukite šablono elemento, kuriam priklauso šis spustelėtas elementas, duomenų struktūrą į ir padarykite jį pasirinktu elementu */ selectedItem = $.tmplItem(this); /* Nustatykite šio elemento šabloną į išsamios informacijos šabloną */ selectedItem.tmpl = $("#detailTemplate").template(); selectedItem .update(); )).delegate(.movieDetail", "click", function () ( /* Nustatyti šio elemento šabloną į suvestinės šabloną */ selectedItem.tmpl = $("#summaryTemplate").template (); pasirinktasElementas.atnaujinimas(); pasirinktasElementas = null; ));

Gana sudėtinga ir didelė, vienu metu naudojami keli papildinio metodai, paimti iš.

2 pavyzdys: Duomenų su žymėjimu įterpimas į šabloną

.role (šrifto svoris: paryškintas; šrifto stilius: kursyvas;) #movieContainer (padding-left: 8px;) $(Vardas)

((html santrauka))

/* Aprašymo duomenų lauke yra HTML žymėjimas. */ var movie = ( Pavadinimas: "Susipažinkite su Džo Blacku", Santrauka: "Grim Reaper (Bradas Pittas) aplanko Bilą Parrishą (Anthony Hopkinsas)..." ); /* Pateikite šabloną su filmo duomenimis. Šablonas naudoja ((html)) šablono žymą, kad įterptų santraukos HTML žymėjimo duomenis. */ $("#movieTemplate").tmpl(movie) .appendTo("#movieContainer");

Šiame pavyzdyje prie šablono pridedamos ir paprastos eilutės lauko reikšmės, ir reikšmės su žymėjimu, paimtos iš čia.

P.S.

Pavyzdžių neaprašiau, bet jei publika palaiko mano iniciatyvas, galiu žingsnis po žingsnio aprašyti kas, kaip ir kodėl bei pateikti dar kelis pavyzdžius.

Užduokite klausimų apie papildinį forume, jei yra komentarų konkrečiai apie straipsnį, komentuokite toliau.

Tai suteikia galimybę naudoti šablonus, kad būtų lengva generuoti HTML elementus iš „JavaScript“ duomenų objektų.

Kad nekiltų nesusipratimų, noriu perspėti, kad šiuo metu šis modulis nėra aktyviai kuriamas ir nepalaikomas, o jQuery komanda jo naudoti nerekomenduoja. Tai nereiškia, kad neturėtumėte jo naudoti, bet jaučiau, kad mano pareiga jums tai pasakyti prieš įtraukiant tai į savo projektus. Mielai rekomenduočiau kitą aktyviai kuriamą variantą, bet kol kas nepavyko rasti jQuery Templates pakaitalo, kuris būtų net artimas savo galimybėmis. Tačiau net ir su minėtu kūrėjų požiūriu į jį, šis modulis vis tiek išlieka geriausias.

„jQuery Templates“ modulio istorija yra gana neįprasta. „Microsoft“ ir „jQuery“ komanda paskelbė, kad trims „Microsoft“ sukurtiems įskiepiams buvo suteiktas „oficialus“ statusas, ko anksčiau nebuvo pasiekęs joks papildinys.

Po kurio laiko jQuery komanda paskelbė, kad nutraukia šių modulių naudojimą ir atima iš jų oficialų statusą, taip pat planuoja juos pakeisti kitomis funkcijomis. Numatytas pakaitalas turėjo būti „jQuery“ vartotojo sąsajos bibliotekos dalis. Gaila, bet tiesa: nieko, kas buvo žadėta, dar nepateikta, o išmesti įskiepiai vis dar yra prieinami ir plačiai naudojami (ypač šablono įskiepis).

Aišku, ar naudoti pasenusį kodą, ar ne, yra asmeninis sprendimas, bet man asmeniškai patinka šablonų teikiamos funkcijos ir dažnai ja naudojuosi. Tačiau manau, kad galiu bet kada pažvelgti į šaltinio kodą ir išspręsti bet kokią rimtą problemą, jei ji iškiltų, o tai, kad kartais vis tiek reikia ieškoti būdų, kaip įveikti nedidelius sunkumus, atsiperka naudos, kurią teikia šablonų naudojimas. .

„jQuery“ šablonų bibliotekos nustatymas

Kad galėtumėte naudoti jQuery šablonus, turite atsisiųsti jQuery šablonų biblioteką ir prijungti ją prie savo dokumento.

Išpakuokite archyvą ir nukopijuokite jQuery.tmpl.js (kūrimo versija) arba jQuery.tmpl.min.js (diegimo versija) failą į savo žiniatinklio serverį. Kitas dalykas, kurį reikia padaryti, yra pridėti scenarijaus elementą prie pavyzdinio dokumento, kuriame yra šablonų biblioteka, kaip parodyta toliau pateiktame pavyzdyje:

jQuery biblioteka $(function() ( // Kodo pavyzdys bus čia )); h1 (min. plotis: 70 piks.; kraštinė: stora dviguba juoda; paraštė kairėje: automatinė; paraštė dešinė: automatinė; teksto lygiavimas: centre; šrifto dydis: x-large; užpildymas: ..png"); fonas- dydis: įtraukti; paraštės viršuje: 0; .dtable (rodymas: lentelė;).drow (rodymas: lentelės eilutė;).dcell (rodymas: lentelės langelis; užpildymas: 10 pikselių;).dcell > * (vertikaliai - lygiuoti : vidurinis) įvestis (plotis: 2 em; teksto lygiavimas: dešinėn; kraštinė: plona vientisa juoda; užpildas: 2 pikseliai;) etiketė (plotis: 6 em; užpildymas kairėje: 0,5 em; ekranas: eilutinis blokas;) #buttonDiv ( tekstas -lygiuoti: centre;) mygtukas (padding: 12px;) #blokuoti (ekranas: blokuoti; paraštė kairėje: automatinis; paraštė dešinėje: automatinis; minimalus plotis: 700 pikselių; ) Gėlių parduotuvė Užsakyti

Šiame straipsnyje mes naudosime šį kodą kaip pavyzdinį dokumentą. Tikriausiai pastebėjote, kad ji skiriasi nuo anksčiau aptartos pirminės versijos ne tik tuo, kad į ją įtraukta šablonų biblioteka, bet ir tuo, kad buvo pašalinti elementai, atitinkantys įvairių rūšių gėlių gaminius. Tai daroma specialiai tam, kad šiuos elementus dokumente galėtume atkurti įvairiais būdais naudodami šablonų biblioteką.

Pradinio dokumento išvaizda naršyklės lange šiame etape parodyta paveikslėlyje:

Paprasto duomenų šablono pavyzdys

Geriausias būdas išmokti duomenų šablonus yra pradėti veikti. Norėdami parodyti pagrindines šablonų galimybes, naudojame toliau pateiktą kodo pavyzdį:

... $(function() ( var data = [ ( pavadinimas: "Astra", produktas: "astor", atsargų lygis: "10", kaina: 2,99), ( pavadinimas: "Narcizas", produktas: "narcizas", atsargų lygis: "12", kaina: 1,99), ( pavadinimas: "Rose", gaminys: "rožė", atsargų lygis: "2", kaina: 4,99), ( pavadinimas: "Bjūnus", produktas: "bijūnas", atsargų lygis: "0", kaina: 1.50), ( pavadinimas: "Primula", prekė: "primula", atsargų lygis: "1", kaina: 3.12), ( pavadinimas: "Snieguolė", prekė: "sniegas", atsargų lygis: "15 ", kaina: 0,99), ]; $("#flowerTmpl").tmpl(data).appendTo("#row1"); )); .png"/> $(vardas): ...

Tolesniuose skyriuose pavyzdį išskaidysime į atskiras dalis ir išanalizuosime kiekvienos iš jų kodą atskirai. Kai duomenys yra dokumento dalis, jie vadinami tiesioginiais duomenimis. Alternatyva jiems yra nuotoliniai duomenys, saugomi serveryje atskirai nuo dokumento. Šiek tiek vėliau pažvelgsime į nuotolinius duomenis, tačiau kol kas matote, kad ši problema yra glaudžiai susijusi su „JQuery“ teikiama „Ajax“ palaikymu.

Duomenų apibrėžimas

Pavyzdys prasideda duomenų apibrėžimu. Mūsų atveju duomenys yra objektų masyvas, kurių kiekvienas apibūdina atskirą gėlių gaminio rūšį. Toliau pateikiamas atitinkamas kodo fragmentas:

Var data = [ ( pavadinimas: "Astra", produktas: "astor", atsargų lygis: "10", kaina: 2,99), ( pavadinimas: "Narcizas", produktas: "narcizas", atsargų lygis: "12", kaina: 1,99 ), ( pavadinimas: "Rose", prekė: "rožė", atsargų lygis: "2", kaina: 4,99), ( pavadinimas: "Bijūnas", produktas: "bijūnas", atsargų lygis: "0", kaina: 1,50), ( pavadinimas: "Primula", prekė: "primula", atsargų lygis: "1", kaina: 3,12), ( pavadinimas: "Snieguolė", prekė: "sniego gniūžtė", atsargų lygis: "15", kaina: 0,99), ];

Duomenys išreiškiami kaip vienas ar keli „JavaScript“ objektai. jQuery šablonų biblioteka suteikia daug lankstumo renkantis objektus, kurie gali būti naudojami kaip duomenys, tačiau aukščiau pateiktas formatas, atitinkantis JSON duomenų formatą, yra labiausiai paplitęs. JS0N formatas yra labai svarbus, nes jis dažnai naudojamas dirbant su Ajax.

Šiame pavyzdyje masyvą sudaro šeši objektai, kurių kiekvienas turi keletą savybių, apibūdinančių konkretų produktą: rodomas pavadinimas, produkto pavadinimas, galimų vienetų skaičius ir kaina.

Šablono apibrėžimas

Kaip tikriausiai galite atspėti, pagrindinis šablonų bibliotekos elementas yra duomenų šablonas. Tai HTML elementų rinkinys, kuriame yra rezervuotos vietos, atitinkančios įvairias duomenų objektų savybes. Šio pavyzdžio šablonas parodytas žemiau:

.png"/> $(vardas):

Pirmas dalykas, į kurį reikia atkreipti dėmesį, yra tai, kad šablonas dedamas į scenarijaus elementą, kurio tipo atributas nustatytas į neegzistuojantį tipą - text/x-jquery-tmpl. Tai daroma tam, kad naršyklė nebandytų interpretuoti šablono turinio kaip įprasto HTML žymėjimo. Nors ir nebūtina, šios praktikos reikėtų laikytis, nes ji yra labai naudinga ir leis išvengti daugelio galimų problemų ateityje.

Antras dalykas, kurį noriu pabrėžti, yra tai, kad id atributas naudojamas scenarijaus elemente apibrėžtam šablonui pavadinti. Šiuo atveju šablono pavadinimas yra flowerTmpl. Norėdami pritaikyti šabloną duomenims, turite žinoti jo pavadinimą.

Šablono turinys bus pritaikytas visiems duomenų masyvo objektams, todėl kiekvienam objektui bus sudarytas HTML elementų rinkinys. Matote, kad šablono struktūra paprastai atitinka elementų rinkinį, kuris buvo naudojamas ankstesniuose straipsniuose, vaizduojant skirtingus gėlių gaminių tipus. Pagrindinis skirtumas tarp jų yra kodo elementai, kurie veikia kaip duomenų rezervuotos vietos.

Apdorojant šabloną, kiekviena rezervuota vieta pakeičiama ypatybės reikšme, paimta iš dabartinio objekto. Pavyzdžiui, pirmam masyvo objektui vietoj $(product) vietos rezervavimo vietos bus pakeista produkto savybės reikšmė, t.y. "astor". Taigi modelio dalis

$(vardas):

yra konvertuojamas į šį HTML fragmentą:

Aster:

Vertės pakeitimas nėra vienintelis dalykas, kurį gali padaryti šablonai. Kiti jų pajėgumai aptariami toliau.

Šablono taikymas

tmpl() metodas naudojamas šablonui sujungti su duomenimis. Kai tai darote, nurodote naudotinus duomenis ir jiems taikytiną šabloną. Šio metodo naudojimo pavyzdys pateikiamas žemiau:

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

Čia pasirenkame elementą, kuriame yra šablonas, naudodami funkciją $() ir gautame rezultate iškviečiame tmpl() metodą, perduodami duomenis, kuriuos norime apdoroti kaip argumentą.

Metodas tmpl() grąžina standartinį jQuery objektą, kuriame yra elementai, gauti iš šablono. Tokiu atveju susidaro „div“ rinkinys, kurių kiekviename yra img, etiketė ir įvesties elementai, sukonfigūruoti vienam iš duomenų masyve esančių objektų. Metodas appendTo() naudojamas įterpti visą rinkinį kaip antrinį elementą į 1 eilutės elementą. Rezultatas parodytas paveikslėlyje:

Rezultato modifikavimas

Gautas rezultatas mūsų nėra visiškai patenkintas, nes visi elementai, atitinkantys skirtingas spalvas, rodomi vienoje eilutėje. Tačiau kadangi mes susiduriame su „jQuery“ objektu, elementų išdėstymas taip, kaip norime, neturėtų būti pernelyg sudėtingas. Toliau pateiktame pavyzdyje parodyta, kaip tai galima padaryti manipuliuojant tmpl() metodo išvestimi:

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

Šiame pavyzdyje slice() ir end() metodai naudojami norint susiaurinti ir išplėsti pasirinktų elementų rinkinį, o metodas appendTo() naudojamas šablono sugeneruotų elementų pogrupiams įtraukti į įvairias eilutes.

Atminkite, kad norint grąžinti rinkinį į būseną, kuri buvo prieš naudojant slice() ir appendTo(), end() reikėjo iškviesti du kartus iš eilės. Čia nėra nieko neteisėto, ir aš mielai naudoju end() metodą, kad viską atlikčiau vienu teiginiu, tačiau seka end().end() manęs nejaudina. Tokiais atvejais norėčiau suskaidyti visą veiksmų seką į atskirų operacijų seriją, kaip parodyta toliau pateiktame pavyzdyje:

Var templResult = $("#flowerTmpl").tmpl(duomenys); templResult.slice(0, 3).appendTo("# eilutė1"); templResult.slice(3).appendTo("#row2");

Abiem atvejais rezultatas bus toks pat: produktų kolekcijos vaizdas dviejose eilutėse, kurių kiekvienoje rodomos trijų tipų spalvos, kaip parodyta paveikslėlyje:

Įvesties pateikimo būdo keitimas

Kitas galimas būdas yra pakeisti duomenų perdavimo būdą į tmpl() metodą. Atitinkamas pavyzdys pateikiamas žemiau:

Var šablonas = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("# eilė1"); template.tmpl(data.slice(3)).appendTo("#row2");

Pagal šį scenarijų elementų paskirstymas į eilutes atliekamas naudojant šabloną du kartus – po vieną kiekvienai eilutei. Atitinkama duomenų objektų dalis kiekvieną kartą perduodama šablonui naudojant slice() metodą. Nepaisant skirtumo tarp šio ir ankstesnio metodo, gauname tą patį rezultatą, kuris buvo pateiktas aukščiau esančiame paveikslėlyje.

Išraiškų vertinimas

Duomenų objektai gali būti naudojami ne tik nuosavybės verčių gavimui. Jei „JavaScript“ išraišką įdėsite tarp dviejų skliaustų, šablono variklis įvertins jį ir įterps į šablono sugeneruotą HTML žymėjimą. Atitinkamas pavyzdys pateikiamas žemiau:

$(vardas):

Šiame šablone įvesties elemento vertės atributas nustatomas remiantis atsargų lygio ypatybės verte, naudojant trinarį sąlyginį operatorių. Garbanotuose skliaustuose esanti išraiška atlieka tą patį vaidmenį, kaip ir tiesioginė turto vertė, įrašyta jos vietoje. Jei atsargų lygio savybės vertė yra didesnė už nulį, tada vertė nustatoma į 1, kitu atveju - 0.

Gautas puslapis naršyklės lange parodytas paveikslėlyje žemiau. Visoms spalvoms, išskyrus bijūnus, nustatoma didesnė nei nulis atsargų vertė:

Šis pavyzdys iliustruoja pagrindinį darbo su šablonais būdą: duomenys sujungiami su šablonu, kad būtų sukurti DOM objektai, kurie vėliau pridedami prie dokumento naudojant pagrindines jQuery funkcijas. Turiniui generuoti galite naudoti tiesiogiai nurodytas reikšmes arba apskaičiuotas išraiškas.

Šablono kintamųjų naudojimas

Šablonai nėra „JavaScript“ scenarijai. Bet koks turinys, kurį pridedate prie scenarijaus elemento, laikomas šablono dalimi ir bus įtrauktas į išvestį. Kad šablonai būtų lankstesni, jums pateikiamas nedidelis skaičius konteksto kintamųjų, kuriuos galima naudoti rezervuotos vietos aprašuose. Trumpas šių kintamųjų aprašymas pateikiamas toliau esančioje lentelėje:

Naudojant $data kintamąjį

$data kintamasis grąžina dabartinį duomenų elementą, kuriam taikomas šablonas. Pavyzdžiui, naudojamas $data kintamasis paeiliui nurodys kiekvieną objektą, atitinkantį skirtingus spalvų tipus. Norint gauti ankstesniame pavyzdyje pateiktus duomenis, šablone buvo naudojamas trijų dalių sąlyginis operatorius. Toks požiūris yra gana priimtinas, tačiau skaitant gautus šablonus dažnai kyla sunkumų, kurių, žinoma, patartina vengti.

Visada stengiuosi, kad šablono kodas būtų minimalus, todėl noriu naudoti $data kintamąjį JavaScript funkcijose, kurias iškviečiu iš šablono. Atitinkama demonstracinė versija pateikiama žemiau:

$(function() ( var data = [ ( pavadinimas: "Astra", produktas: "astor", atsargų lygis: "10", kaina: 2,99), ( pavadinimas: "Narcizas", produktas: "narcizas", atsargų lygis: " 12", kaina: 1,99), ( pavadinimas: "Rose", gaminys: "rožė", atsargų lygis: "2", kaina: 4,99), ( pavadinimas: "Bijūnas", produktas: "bijūnas", atsargų lygis: "0" , kaina: 1,50), ( pavadinimas: "Primula", prekė: "primula", atsargų lygis: "1", kaina: 3,12), ( pavadinimas: "Snieguolė", prekė: "sniegas", atsargų lygis: "15", kaina : 0,99), ]; var šablonas = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)) .appendTo("# eilutė2"); )); funkcija stockDisplay(product) ( grąžinti produktas.stocklevel > 0 ? 1: 0; ) .png"/> $(name):

Šiame pavyzdyje apibrėžiama funkcija stockDisplay(), kuri grąžina reikšmę, kuri turėtų būti rodoma įvesties elemente. Šios funkcijos argumentas yra duomenų objektas, kurį gauname šablone naudodami $data kintamąjį. Atsižvelgiant į tai, kad tai tik paprastas trijų dalių operatorius, kodo skaitomumo skirtumas, palyginti su ankstesne versija, nėra labai reikšmingas, tačiau sudėtingesnių išraiškų atveju arba pakartotinai naudojant išraišką tame pačiame šablone būti daug labiau pastebimas.

Būkite atsargūs nustatydami funkcijas, kurios bus iškviestos iš šablono. Esmė ta, kad tokios funkcijos turi būti apibrėžtos prieš iškviečiant tmpl() metodą. Aš visada stengiuosi juos įdėti į scenarijaus elemento pabaigą, bet jei funkcija turi būti paruošto įvykių tvarkyklėje, tuomet tikrai turėtumėte įsitikinti, kad ji buvo apibrėžta anksčiau. Kita dažna klaida yra ta, kad funkcija dažnai apibrėžiama šablone.

$() funkcijos naudojimas šablone

Vietos žymos, naudojamos šablone, gali naudoti funkciją jQuery $(), tačiau svarbu atsiminti, kad šablono sugeneruoti elementai nėra pridedami prie dokumento, todėl nebus įtraukti į jQuery pasirinkimo rinkinius. Šią funkciją naudoju retai, nes dažniausiai mane labiau domina elementai ir susiję duomenys, kuriuos generuoju pats.

$item kintamojo naudojimas

$item grąžintas objektas naudojamas keliems tikslams. Pirmasis yra leisti keistis papildomais duomenimis tarp JavaScript scenarijaus ir šablono. Atitinkamas pavyzdys pateikiamas žemiau:

$(function() ( var data = [ ( pavadinimas: "Astra", produktas: "astor", atsargų lygis: "10", kaina: 2,99), ( pavadinimas: "Narcizas", produktas: "narcizas", atsargų lygis: " 12", kaina: 1,99), ( pavadinimas: "Rose", gaminys: "rožė", atsargų lygis: "2", kaina: 4,99), ( pavadinimas: "Bijūnas", produktas: "bijūnas", atsargų lygis: "0" , kaina: 1,50), ( pavadinimas: "Primula", prekė: "primula", atsargų lygis: "1", kaina: 3,12), ( pavadinimas: "Snieguolė", prekė: "sniegas", atsargų lygis: "15", kaina : 0,99), ]; $("Šiandien specialus pasiūlymas: " + "50 centų nuolaida") .insertAfter("h1") .css(( spalva: "raudona", šrifto dydis: "14pt", tekstasLygiuoti: "centras" ) ); var Options = ( nuolaida: $("#pasiūlymas").data("nuolaida"), atsargosDisplay: function(product) (grąžinti product.stocklevel > 0 ? 1: 0; ) ); var template = $ (" #flowerTmpl"); šablonas.tmpl(data.slice(0, 3), options).appendTo("#row1"); template.tmpl(data.slice(3), options).appendTo("#row2 ") ;)); .png"/> $(vardas):

Šiame pavyzdyje sukuriame parinkčių objektą, kuris apibrėžia savybę (nuolaida) ir metodą (stockDisplay()). Tada šis objektas perduodamas tmpl() metodui kaip antrasis argumentas. Kintamasis $item suteikia prieigą prie objekto savybių ir metodų iš šablono. Kaip matote, norint tvarkyti kainos nuolaidą, čia naudojama opcionų objekto nuolaidos savybė.

Norėčiau atkreipti jūsų dėmesį į būtinybę įtraukti $ priešdėlį į kontekstinių kintamųjų pavadinimus: $item ir $data. Tas pats priešdėlis taip pat reikalingas šablono deskriptoriaus konstrukcijoje $(...), naudojamas šablono reikšmėms pakeisti. Bet kurio iš šių priešdėlių praleidimas yra viena iš dažniausiai pasitaikančių klaidų.

Apie kitus šio objekto pritaikymus kalbėsime vėliau.

Įdėtų šablonų naudojimas

Kuriant sudėtingas programas kartais prasminga didelį šabloną suskaidyti į kelias dalis, kurios sujungiamos programos vykdymo etape. Kaip bus parodyta vėliau, šis šablonų derinimo būdas suteikia lankstesnį išvesties valdymą. Pradėsime nuo paprasčiausio. Toliau pateiktame pavyzdyje parodyta, kaip vienas šablonas gali nurodyti kitą:

... .png"/> $(pavadinimas): ((tmpl($data, $item) "#inputTmpl"))

Šiame pavyzdyje šablonas yra padalintas į dvi dalis. Pirmasis iš jų, gėliųTmpl šablonas, yra iškviestas kiekvienam duomenų masyvo elementui. Šis šablonas savo ruožtu iškviečia inputTmpl šabloną, kad sukurtų įvesties elementus. Antrasis šablonas iškviečiamas naudojant rankenėlę ((tmpl)). Šis kvietimas turi tris argumentus. Pirmieji du yra dabartinis elementas ir parinkčių objektas; šie argumentai pateikiami skliausteliuose. Trečiasis argumentas yra skambinimo šablonas. Jis gali būti nurodytas jQuery parinkikliu (kaip padaryta aukščiau), arba scenarijuje apibrėžtu kintamuoju ar funkcija.

Sąlyginių šablonų naudojimas

Šablonų variklis suteikia galimybę dinamiškai priimti sprendimus dėl skirtingų šablono dalių naudojimo, priklausomai nuo tam tikrų sąlygų įvykdymo. Tam yra deskriptoriai ((jei)) ir ((/jei)), jų naudojimo pavyzdys pateikiamas žemiau:

... ((jei atsargų lygis > 0)).png"/> $(pavadinimas): ((/jei))

Sąlyga nurodyta ((jei)) deskriptoriuje, o šablono dalis tarp šio deskriptoriaus ir ((/jei)) deskriptoriaus bus naudojama tik tuo atveju, jei sąlyginė išraiška bus įvertinta kaip tiesa. Jei šis rezultatas klaidingas, nurodyta šablono dalis nepaisoma. Tokiu atveju tikrinama stocklevel ypatybės reikšmė, o jei ji lygi nuliui, visas flowerTmpl šablonas ignoruojamas. Tai reiškia, kad bus rodomi tik tie produktai, kurie yra sandėlyje, kaip parodyta paveikslėlyje:

Sudėtingesnes sąlygas galima nurodyti naudojant ((else)) deskriptorių, kuris leidžia nurodyti šablono dalį, kuri turėtų būti naudojama tais atvejais, kai ((jei)) deskriptoriaus išraiška vertinama kaip klaidinga. Atitinkamas pavyzdys pateikiamas žemiau:

... ((jei atsargų lygis > 5)) .png"/> $(pavadinimas): ((kitaip atsargų lygis > 0)) .png"/> $(pavadinimas): (Maža suma) ((kita)) .png " style="opacity:0.5"/> $(name) (Išparduota) ((/if))

Pagal šį scenarijų rodomų prekių rinkinys nustatomas pagal tai, kiek kiekvieno produkto tipo vienetų yra sandėlyje: daugiau nei penki, penki, mažiau nei penki arba jų nėra. Pateikiau tik nedidelius skirtumus tarp elementų, sugeneruotų kiekvienai iš šių sąlygų, tačiau galite laisvai naudoti šias funkcijas, kad sukurtumėte visiškai skirtingą turinį. Galiausiai, jei reikia, galite iškviesti kitus šablonus pagal sąlygas.

Aukščiau pateikto scenarijaus rezultatas parodytas paveikslėlyje:

Pradėkime Pradėkime. Toliau pateiktame pavyzdyje rodomas masyve pateiktų filmų sąrašas (visas pavyzdžio kodas yra faile BasicSample1.htm):

Paprastas pavyzdys (1) $(pavadinimas)

Režisierius: $(direktorius)
Aktoriai: $(aktoriai)
Metai: $(metai)

$(funkcija () ( $("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag"); )); Paprastas pavyzdys (1)
Ir štai ką pamatysite naršyklėje:

Pažvelkime į šį pavyzdį išsamiai.

Taigi pirmas dalykas, kurį darau, yra prisijungti „jQuery Core Library“. Ir jQuery šablonai:

Prieš tai ne kartą buvo pasakyta jQuery šablonai bus įtrauktas į „jQuery Core Library“.- bet jQuery 1.5 RC1, išleistoje sausio 24 d., šablonų vis dar trūksta.

Tada įkeliu filmų sąrašą:

Žinoma, šaltinio duomenis galite paruošti bet kokiu jums patogiu būdu – gaukite juos naudodami AJAX užklausą, sukurkite pagal vartotojo įvestį ir pan., aš naudoju pavyzdžiui tik statinį scenarijų.

Failo viduje DataItems.js taip:

Var dataItems = [ ( pavadinimas: "Bandits", miniatiūra: "Bandits.jpg", režisierius: "Barry Levinson", aktoriai: ["Bruce Willis", "Billy Bob Thornton", "Cate Blanchett"], metai: 2001, biudžetas: 95000000, bruto pajamos: 67631903, įvertinimas: 0, kadrai: ["Bandits-1.jpg", "Bandits-2.jpg", "Bandits-3.jpg", "Bandits-4.jpg", "Bandits-4.jpg" 5.jpg"] ),...
Kitas žingsnis yra sukurti šabloną:

$(pavadinimas)

Režisierius: $(direktorius)
Aktoriai: $(aktoriai)
Metai: $(metai)

Atminkite, kad šablonas dedamas į žymą SCENARIJUS, ir kaip aš nurodysiu MIME tipą text/x-jquery-tmpl. Kai analizuodama dokumentą susiduria su nepažįstamu MIME tipu, naršyklė nebando interpretuoti žymos turinio SCENARIJUS, ko man reikia.

Paprastai tariant, šabloną galima įdėti į bet kurią žymą, pavyzdžiui, žymoje DIV:

$(pavadinimas)

Režisierius: $(direktorius)
Aktoriai: $(aktoriai)
Metai: $(metai)

Tačiau tokiu atveju negalima išvengti šalutinio poveikio, nes naršyklė tikrai bandys interpretuoti šablono kodą.

Pavyzdžiui, aukščiau pateiktame pavyzdyje bus bandoma įkelti neegzistuojantį vaizdą:

Tačiau lentelės atveju viskas gali būti daug įdomiau (labai ačiū TEHEK už šį pavyzdį!):

((kiekvienas duomenų elementas)) ((/kiekvienas))

$(pavadinimas)

$(direktorius)

$ (metai)

Internet Explorer ir Opera tinkamai apdoros šį kodą:

Tačiau „Chrome“ ir „Fire Fox“ „išstums“ papildomą kodą už lentelės ribų, todėl lentelė bus tuščia... Sėkmingo derinimo! ;-)

Dėl žymės PASIRINKTI bus stebimas panašus vaizdas.

Galiausiai pateikiu šabloną tokiu skambučiu:

$("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag");
Žemiau esančioje diagramoje pavaizdavau, kas vyksta:

Metodas .tmpl() gauna šablono tekstą – t.y. vidinis tekstas elementas, gautas skambinant $("#movieTmpl").

Šablono tekstas sukompiliuojamas ir pagal jį sukuriama JavaScript funkcija.

Sukuriamas „šablono egzempliorius“ – objektas, kuriame yra nuoroda į duomenų elementą (lauką duomenis) buvo priimtas kaip metodo argumentas .tmpl(). Metodas .tmpl() galite perduoti masyvą, objektą, nulinis arba vadinti tai be argumentų. Jei perduodate masyvą, kiekvienam masyvo elementui bus sukurtas atskiras šablono egzempliorius, nurodantis šį elementą; visais kitais atvejais bus sukurtas tik vienas egzempliorius.

Sukompiliuota šablono funkcija iškviečiama ir perduodama egzemplioriaus objektui. Funkcija grąžina šablono tekstą, kuriame buvo atlikti visi pakeitimai.

Ankstesniame žingsnyje gautas tekstas konvertuojamas į HTML elementų rinkinį. Nuorodos į šiuos elementus taip pat saugomos egzemplioriaus objekte (lauke mazgai), kuri leidžia lengvai atnaujinti šablono „išvestį“ ateityje, kai pasikeičia šaltinio duomenys (žr. skyrių „Dinaminis atnaujinimas“).

Ir galiausiai metodas .tmpl() grįžta jQuery- HTML elementų rinkinys, kuris pridedamas prie dokumento naudojant skambutį appendTo ("#movieListBag").

Išraiškos Norėdami pakeisti reikšmes į šabloną, naudokite žymą ${...} . Šios žymos viduje galite nurodyti metodui perduoto objekto ypatybės pavadinimą .tmpl(), taip pat bet kokią galiojančią „JavaScript“ išraišką, įskaitant funkcijos iškvietimą.

Objekto (masyvo elemento) savybių naudojimas:

$(pavadinimas)
„JavaScript“ išraiškų naudojimas:

Biudžetas: $$((biudžetas / 1000000).iki Fiksuoto(0)) mln.
Bruto: $$((grossRevenue / 1000000).iki Fiksuoto(1)) mln.

Šablono egzempliorių laukai ir metodai Išreiškimuose dabartinį šablono egzempliorių galite pasiekti naudodami kintamąjį $item, o norint pasiekti esamą duomenų elementą – kintamąjį $duomenys.

Kiekviename šablono egzemplioriuje yra šie laukai:

duomenis- yra nuoroda į duomenų elementą, susietą su šablono egzemplioriumi;

tmpl- yra nuoroda į sudarytą šabloną, naudojamą atvaizdavimui;

tėvas- jei šablonas buvo iškviestas iš kito šablono naudojant žymą ((tmpl)), yra nuoroda į „pirminį“ šablono egzempliorių;

mazgai- po pateikimo yra nuorodos į HTML elementus, sugeneruotus pritaikius šabloną.

Be to, metodas .tmpl() turi du argumentus - duomenis Ir galimybės. Su argumentu duomenis jau susitikote, per jį perduodama nuoroda į duomenų elementą. Ir naudojant argumentą galimybės, galite perduoti nuorodą į objektą, kurio visi laukai ir metodai bus perkelti į kiekvieną metodu sukurtą šablono egzempliorių .tmpl().

Žemiau pateikiamas šio parametro naudojimo pavyzdys:

$(pavadinimas)

Režisierius: $(direktorius)
Aktoriai: $(aktoriai)
Metai: $(metai)
Biudžetas: $$($item.formatBudget(budget)) mln.
Bruto: $$($item.formatGrossRevenue(grossRevenue)) mln.

$(function () ( $("#movieTmpl") .tmpl(dataItems, ( formatBudget: funkcija (vertė) ​return (reikšmė / 1000000).toFixed(1); ) )).appendTo("#movieListBag"); ));
Šiame pavyzdyje naudoju funkcijų iškvietimus, kad formatuočiau biudžeto ir mokesčių reikšmes, tačiau, kad nebūtų užgriozdinta visuotinė vardų erdvė, perdaviau juos per parametrą galimybės, po kurio šios funkcijos tapo prieinamos kaip dabartinio šablono egzemplioriaus metodai.

Galiausiai šablono egzemplioriuje yra metodai atnaujinti () Ir html(), kurio naudojimą parodysiu žemiau.

Kaip atrodo sudarytas šablonas? Naudodami metodą galite pamatyti, kaip atrodo sudarytas šablonas .template(), kuri tik kompiliuoja šablonus. Šis metodas grąžina funkcijos objektą, kurio turinį lengva peržiūrėti:

$("#compiledTemplateBag").text("" + $("#movieTmpl").template());
Aukščiau pateiktame pavyzdyje naudojamas šablonas sudarytas atrodo taip (tekstas suformatuotas, kad būtų geriau skaitomas):

Funkcija anoniminė(jQuery, $item) ( var $ = jQuery, call, _ = , $data = $item.data; su ($duomenys) ( _.push(" "); if (tipas (pavadinimas) !== "neapibrėžta" && (pavadinimas) != null) ( _.push($.encode((tipas (pavadinimas) === "funkcija") ? (title).call( $elementas) : (pavadinimas)))); ) _.push("

Režisierius: "); if (tipas (direktorius) !== "neapibrėžta" && (direktorius) != null) ( _.push($.encode((tipas (direktorius) === "funkcija") ? (direktorius). call($item) : (direktorius)))); ) _.push("
Cast: "); if ((aktorių) tipas !== "neapibrėžtas" && (aktoriai) != null) ( _.push($.encode(((aktorių) tipas) === "funkcija" ? (aktoriai)) . call($item) : (aktoriai)))); ) _.push("
Metai: "); if (tipas (metai) !== "neapibrėžta" && (metai) != null) ( _.push($.encode((typeof (year) === "function") ? (metai). skambutis($prekė) : (metai)))); ) _.push("

"); ) grąžinti _;)
Manau, kad dabar turėtumėte suprasti, kaip apdorojami žymoje nurodyti posakiai ${...} - ir šis supratimas gali labai padėti derinant! Faktas yra tas jQuery šablonai atlieka gana paprastą šablono teksto transformaciją, todėl suklydus reiškinyje, klaidos pranešimas bus susijęs su gautos funkcijos tekstu ir dažnai gali būti labai painus.

Deja, jei šablonas kompiliuojamas su klaida, tai be specialių gudrybių nematysite funkcijos teksto su klaida, nes atitinkamas metodas paskelbiamas privačiu.

Na, manau, tai pasakojimui apie darbą. jQuery šablonai verta jį užbaigti ir pereiti prie praktinio taikymo.

Antra dalis, praktinėSąlygos Norėdami pritaikyti šablono dalis priklausomai nuo tam tikrų sąlygų, į jQuery šablonai naudojamos žymos ((jei))...((kita))...((/jei)).

Toliau pateiktame pavyzdyje parodytas šių žymų naudojimas (visas pavyzdžio kodas yra faile IfElseTag.htm):

Medija: ((jei $item.data.media == "dvd")) ((kita $item.data.media == "blue-ray")) ((Kitas)) ((/jei))

Kaip galite atspėti, šis kodas skirtas rodyti laikmenos, kurioje yra filmas, piktogramą. Štai kaip tai atrodo naršyklėje:

Kaip sąlyga etiketėse ((jei)) Ir ((Kitas)) Galite naudoti bet kurią galiojančią „JavaScript“ išraišką.

Kolekcijų apdorojimas Norėdami apdoroti kolekcijas šablonuose, naudokite žymą ((kiekvienas))...((/kiekvienas)). Toliau pateiktame pavyzdyje parodytas žymos naudojimas ((kiekvienas)) kad būtų rodomas veikėjų sąrašas (visas pavyzdžio kodas yra faile EveryTag1.htm):

Aktoriai: ((kiekvienas aktorius)) $($value) ((jei $index< $data.actors.length - 1}} , {{/if}} {{/each}}

Kaip argumentas pažymėti ((kiekvienas)) galite perduoti masyvą, objektą arba jQuery- kolekcija. Vidinė etiketė ((kiekvienas)) naudoja skambutį jQuery.each() taigi, kad ir ką apie elgesį sako dokumentai jQuery.each() taip pat galioja etiketei ((kiekvienas)). Toliau pateiktame pavyzdyje parodytas žymos naudojimas ((kiekvienas)) norėdami parodyti visas objekto savybes (visas pavyzdinis kodas yra faile EveryTag2.htm):

((kiekvienas $duomenys)) $($index) $($value) ((/kiekvienas))
Etiketės viduje ((kiekvienas)) galimi du kintamieji: $ vertė, kuriame yra nuoroda į dabartinį masyvo elementą ir $indeksas, kuriame yra dabartinio masyvo elemento indeksas arba nuosavybės pavadinimas.

Žinoma, etiketės viduje ((kiekvienas)) galite naudoti kitas žymas, be to, vis tiek turėsite prieigą prie kintamųjų $item Ir $duomenys. Pateiktame pavyzdyje kintamieji $indeksas Ir $duomenys kartu su žyma ((jei)) naudojami kableliui tarp veikėjų vardų išvesti – deja, kintamąjį $ paskutinis nėra teikiama, nors tai būtų labai naudinga!

Galiausiai, jei kada nors prireiks, galite pakeisti numatytuosius kintamųjų pavadinimus. Toliau pateiktame pavyzdyje šie pavadinimai pakeisti į myIndex Ir myValue(visas pavyzdinis kodas yra faile EveryTag3.htm):

Aktoriai: ((kiekvienas(myIndex, myValue) aktoriai)) $(myValue) ((jei myIndex< $data.actors.length - 1}} , {{/if}} {{/each}}
Beje, bandoma pakeisti pavadinimą tik kintamajam $indeksas nieko gero neduos - nebus jokios klaidos, bet jūs taip pat negalėsite pasiekti dabartinės vertės!

Įdėtieji šablonai Šablonai gali būti labai dideli – tada prasminga juos padalyti į kelias mažesnes dalis arba įtraukti pasikartojančias dalis, kurias logiška atskirti į atskirą šabloną. IN jQuery šablonai tai daroma naudojant įdėtus šablonus, kurie iškviečiami naudojant žymą ((tmpl)).

Toliau pateiktame pavyzdyje parodyta, kaip dalį šablono kodo perkelti į kitą šabloną (visas pavyzdžio kodas yra faile NestedTemplates1.htm):

...

Režisierius: $(direktorius)
Aktoriai: ((tmpl "#actorsTmpl"))
Metai: $(metai)

... ((kiekvienas aktorius)) $($value) ((jei $indeksas< $data.actors.length - 1}} , {{/if}} {{/each}}
Žymėje ((tmpl)) turi būti nurodyta jQuery-Šablono, kurį norite iškviesti, parinkiklis arba anksčiau talpykloje išsaugoto šablono pavadinimas. Nes šiame pavyzdyje kitų žymos argumentų ((tmpl)) ne, įdėtas šablonas gaus tą patį duomenų elementą kaip ir pirminis, tačiau jis turės savo šablono egzempliorių ir lauką tėvas tai bus nuoroda į pagrindinį šablono egzempliorių.

Šiame pavyzdyje parodytas naujo duomenų elemento perdavimas į įdėtą šabloną ir nuorodos į pagrindinį šablono egzempliorių naudojimas. Kaip ir metodo naudojimo atveju .tmpl(), jei nurodysite masyvą iškviesdami įdėtą šabloną, šablonas bus pritaikytas kiekvienam masyvo elementui (visas pavyzdžio kodas yra faile NestedTemplates2.htm):

...

Režisierius: $(direktorius)
Aktoriai: ((tmpl(actors) "#actors_template"))
Metai: $(metai)

... $($duomenys) ((jei $duomenys !== $item.parent.data.actors[$item.parent.data.actors.length - 1])) , ((/if))
Galiausiai, paskutinis šio skyriaus pavyzdys parodo, kaip perduoti argumentą įdėtam šablonui galimybės, ir tuo pačiu parodo kaip argumentą galimybės gali būti naudojamas norint nustatyti paskutinį apdoroto masyvo elementą (visas pavyzdžio kodas yra faile NestedTemplates3.htm):

...

Režisierius: $(direktorius)
Aktoriai: ((tmpl(aktoriai, ( paskutinis: aktoriai )) "#actors_template"))
Metai: $(metai)

... $($duomenys) ((jei $duomenys !== $item.last)) , ((/if))

Transformacija Dar viena įdomi galimybė jQuery šablonai yra susijęs su HTML žymėjimo transformacija, kuriai naudojama žyma ((įvyniojimas))(paprastai kalbant, įvyniojimas yra „įvyniojimas“, bet man atrodo, kad terminas „transformacija“ geriau atspindi to, kas vyksta).

Klasikinis žymos naudojimo pavyzdys ((įvyniojimas))- tai yra žymių kūrimas:

Taip atrodo viduje (visas kodo pavyzdys yra faile Transformacija1.htm):

((wrap(null, ( viewState: $item.viewState )) "#tabsTmpl")) Anglų kalba The Ballad of East and West Rudyard Kipling

O, Rytai yra Rytai, o Vakarai yra Vakarai...

((/wrap))
Pradiniai transformacijos duomenys įdedami į šabloną skirtukas Turinys- Būtent šį šabloną aš ir toliau pateiksiu.

HTML žymėjimas, kurį pakeisiu, patenka į žymą ((įvyniojimas)). Dėl žymės ((įvyniojimas)) naudojamas lygiai tas pats iškvietimo žymėjimas kaip ir žymoje {}}
Naršyklėje šis pavyzdys atrodytų taip:

Šablonų kaupimas talpykloje Kiekviename skambutyje $("#...").tmpl(...) yra sudarytas šablonas, kuris, nepaisant dramatiškai padidėjusio JavaScript greičio šiuolaikinėse naršyklėse, gali turėti itin neigiamos įtakos našumui. Kūrėjai jQuery šablonai negalėjo ignoruoti šio akivaizdaus fakto, todėl jQuery šablonai numatytas išankstinio šablonų kompiliavimo ir talpyklos kaupimo mechanizmas.

Šablonas sudaromas ir talpykloje saugomas taip:

$("#movieTmpl").template("movieTmpl");
Sudarytas šablonas išsaugomas vidinėje talpykloje jQuery šablonai vardu filmasTmpl. Norėdami pasiekti talpykloje saugomą šabloną, naudokite šį metodą jQuery.tmpl(), o pirmasis parametras yra talpykloje esančio šablono pavadinimas:

$.tmpl("movieTmpl", dataItems).appendTo("#movieListBag");
Toliau pateiktame pavyzdyje naršomas filmų sąrašas, naudojant talpykloje saugomą šabloną informacijai apie filmą rodyti.

Šablono kodas praktiškai nesiskiria nuo tų, kuriuos naudojau anksčiau, skirtumas tik tas, kad po filmo aprašymu yra papildomos navigacijos nuorodos (pilnas pavyzdžio kodas yra faile CachedTemplates.htm):

$(pavadinimas)

Režisierius: $(direktorius)
Aktoriai: $(aktoriai)
Metai: $(metai)

((jei $item.canMoveBack)) [Atgal]((/if)) ((jei $item.canMoveFwd)) [Persiųsti]((/jei))
Pridedamas scenarijus taip pat paprastas:

Var movieIndex = 0; $(function () ( $("#movieTmpl").template("movieTmpl"); updateMovie(); $("#movieBag").delegate(".nav-link", "click", function () ( movieIndex += parseInt($(this).attr("x-inc")); updateMovie(); )); )); funkcija updateMovie() ( $("#movieBag").empty(); $("#movieBag").append($.tmpl("movieTmpl", dataItems, ( canMoveBack: movieIndex > 0, canMoveFwd: movieIndex< dataItems.length - 1 })); }
Naršymo nuorodos paspaudimų tvarkyklė pakeičia pasirinkto filmo indeksą ir iškviečia funkciją atnaujintifilmą(), kuri pirmiausia išvalo filmo aprašymo konteinerį ir užpildo jį naujais duomenimis.

Štai kaip šis pavyzdys atrodo naršyklėje:

Žinoma, naršyklė atsisiųs atitinkamą failą, tačiau vis tiek negalėsite pasiekti jo turinio.

Tačiau šabloną vis tiek galima įdėti į atskirą failą, ir tam pažodžiui reikės vienos papildomos kodo eilutės (visas kodo pavyzdys yra faile):

$(function () ( $.get("Šablonai/DynamicLoading.htm", (), funkcija (templateBody) ( $.tmpl(templateBody, dataItems).appendTo("#movieListBag"); )); ));
Nes Šiuo atveju šabloną gauname teksto pavidalu; metodas naudojamas jam sukurti jQuery.tmpl(), kurio pirmasis argumentas yra gautas šablono tekstas.

Taip, metodas jQuery.tmpl() naudojamas tiek talpykloje saugomiems šablonams sukurti pagal pavadinimą, tiek šablonus, nurodytus kaip tekstas (tradicija!..) – tačiau jis yra pakankamai „protingas“, kad atskirtų juos vieną nuo kito.

Jei reikia įkelti kelis susijusius šablonus, galite naudoti biblioteką WaitSync(žr. „Asinchroninių skambučių sinchronizavimas. WaitSync“) arba parašykite savo sinchronizatorių (visas kodo pavyzdys yra faile):

$(function () ( var ws = new WaitSync(function ()) ( $.tmpl("movieTmpl", dataItems).appendTo("#movieListBag"); )); $.ajax(( cache: false, url: " Šablonai/MovieTmpl.htm", sėkmė: ws.wrap("MovieTmpl", funkcija (templateBody) ( $.template("movieTmpl", templateBody); )), klaida: ws.wrap("MovieTmpl", funkcija () ( alert("Klaida įkeliant MovieTmpl.htm!"); )) )); $.ajax(( cache: false, url: "Templates/ActorsTmpl.htm", sėkmingai: ws.wrap("ActorsTmpl", funkcija (templateBody)) ( $.template("aktoriaiTmpl", templateBody); )), klaida: ws.wrap("AktoriaiTmpl", funkcija () ( alert("Klaida įkeliant ActorsTmpl.htm!"); )) )); ));
Atkreipkite dėmesį, kad šiuo atveju šablonas aktoriaiTmpl vadinamas vardu (failas Šablonai\MovieTmpl.htm):

Režisierius: $(direktorius)
Aktoriai: ((tmpl(aktoriai, ( paskutinis: aktoriai )) "aktoriaiTmpl"))
Metai: $(metai)

Dinaminis atnaujinimas Paskutinėje praktinės dalies dalyje parodysiu dar du darbo scenarijus jQuery šablonai- susijusių duomenų keitimas ir susieto šablono pakeitimas.

Toliau pateiktame pavyzdyje kiekvienam filmui buvo pridėta galimybė pakeisti jo įvertinimą (visas pavyzdžio kodas yra faile DynamicUpdate1.htm):

...
Susijęs kodas:

$(function () ( $("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag"); $("#movieListBag").delegate(.rating-button", "click", function ( ) ( var item = $.tmplItem(this); item.data.rating += parseInt($(this).attr("x-inc")); item.update(); )); ));
Kaip matote, šis kodas yra labai panašus į žymių kodą iš skilties „Transformacija“, tik dirbdamas su žymėmis pasiekiau bendrinamą objektą viewState, ir čia aš dirbu su duomenimis, susietais su šablono egzemplioriumi.

Naršyklėje šis pavyzdys atrodo taip:

Toliau pateiktame pavyzdyje parodytas susieto šablono pakeitimas (visas pavyzdžio kodas yra faile DynamicUpdate2.htm):

((tmpl "#movieMainTmpl"))

[Daugiau...]

((tmpl "#movieMainTmpl"))

Kadrai iš filmo:

((kiekvienas kadras)) ((/kiekvienas))

[Mažiau...]

Čia aš naudoju du šablonus, filmasShortTmpl Ir filmas PilnasTmpl, kurios bendroji dalis įtraukta į šabloną filmas MainTmpl.

Susijęs kodas:

$(function () ( var shortTemplate = $("#movieShortTmpl").template("shortTempl"); var fullTemplate = $("#movieFullTmpl").template(); $.tmpl("shortTempl", dataItems). appendTo("#movieListBag"); $("#movieListBag").delegate(.more-details", "click", function () ( var item = $.tmplItem(this); item.tmpl = item.tmpl === shortTemplate ? fullTemplate: shortTemplate; item.update(); )); ));
Manau, kad šis kodas reikalauja papildomo paaiškinimo.

Norėdami pakeisti šabloną, man reikia nuorodos į sudarytą šabloną. Šias nuorodas gaunu skambindamas .template(). Be to, nes mėginys trumpas Šablonas naudojamas filmų sąrašui pateikti po to, kai puslapis įkeliamas, saugoju jį talpykloje, kad galėčiau jį sukurti pagal pavadinimą.

Naršyklėje šis pavyzdys atrodo taip:

Išvada Straipsnyje naudojamų pavyzdžių kodą galima atsisiųsti iš šios nuorodos.

parsisiųsti jQuery šablonai galite iš ASP.NET CDN svetainės arba tiesiogiai iš GitHub saugyklos:
Brianas Landau „Javascript šablonų bibliotekų lyginamoji analizė“.

Baigdamas norėčiau padėkoti Vitalijui Dilmuchametovui ir Denisui Gladkichui už vertingas pastabas, išsakytas dirbant prie straipsnio.

Žymos: pridėti žymų

 

---

Skaityti:
Nešiojamojo kompiuterio laiko gedimo priežastys ir kaip jas ištaisyti Kompiuteryje prarasti datos ir laiko nustatymai IPhone nustatymas įsigijus Kaip nustatyti iPhone se įsigijus Geriausi būdai sukurti gražų „YouTube“ kanalo foną „Samsung“ išmaniųjų telefonų gamykliniai nustatymai Kas yra „Power BI“ ir kaip su ja dirbti?