Službeni jQuery dodaci: Dodatak za predloške. Učenje rada s jQuery predlošcima Cool jarko jQuery i CSS3 tooltips

Kliknite za detalje:

Izlaskom jQueryja život programerima postao je mnogo lakši. Na primjer, lako možemo učiniti sljedeće: $("#someElement").children().each(function() ( $(this).wrap($("")); )); Ovaj kod će sve potomke elementa s ID-om #someElement staviti u oznaku. Nema ništa loše u takvim operacijama; Ovaj izraz je apsolutno točan i vrlo je zgodan u nekim situacijama. Ali HTML kod postavljen u našu skriptu predstavlja kršenje strukturne logike koda. U ovom jednostavnom primjeru ova povreda nije značajna, ali je u stvarnim projektima vrlo česta. Tipično, takav kod sadrži mnogo HTML fragmenata koji su ugrađeni u DOM nakon primanja podataka iz AJAX zahtjeva. Ovaj stil se brzo može pretvoriti u nešto što je krajnje nečitljivo. Korištenje predložaka omogućit će nam otklanjanje ovog nedostatka odvajanjem HTML fragmenata od skripti, čime se odvaja logika sadržaja različitih vrsta koda. Usput, ne mogu a da vam ne pokažem neke super cool nove značajke AJAX-a koje je uveo jQuery 1.5. Početak U ovom primjeru, razvijat ćemo Twitter widget koji će učitati ne samo naše najnovije objave, već i popis prijatelja i pratitelja. Izabrao sam Twitter za ovaj primjer jer je u interakciji s JSON podacima s kojima je lako i zabavno raditi. Započnimo; sam widget bit će izgrađen na temelju sljedeće HTML strukture: jQuery, AJAX i Templating Dan Wellman Suprug, otac, front-end programer i autor. Piše za Nettuts i Packt Publishing. Radi za @designhaus | jQuery fanatik Tweetovi Prijatelji Sljedbenici Ovaj widget ima super-strašne značajke koje zahtijevaju upotrebu JavaScripta. Omogućite ga za bolje internetsko iskustvo U ovom primjeru koristimo HTML5. Da bismo to učinili, naveli smo pojednostavljeni DOCTYPE i meta element. Također možete primijetiti u kodu vezu sa stilskim listovima, što će biti opisano za nekoliko minuta. Kako bismo podržali trenutnu verziju IE8 i niže, koristimo uvjetne komentare na posebnom dodatku html5shiv. Korištenje na stranu Najvjerojatnije će ovaj widget izgledati kao bočna traka i prikazivati ​​sadržaj navedenog korisnika Twittera. Imajući to na umu, odlučio sam staviti sadržaj u . Kako bismo lakše pristupili ovom elementu, postavit ćemo mu ID. Kad smo već kod oznaka. Svi naslovi objava korisnika Twittera bit će uključeni u oznaku, a slika i sve ostalo bit će uključeno u oznaku Ovo možete promijeniti prema vlastitim željama kada radite obrnuti inženjering ovog primjera. Mogli bismo dobiti sve tražene podatke putem JSON-a, što ćemo i učiniti, međutim, ako dođe do kašnjenja u procesu učitavanja, posjetitelju će se prikazati puno praznih blokova. Stoga je za nas bolje pričekati dok se preuzimanje ne završi i zatim ispuniti blokove. Također ćemo imati kartice na našoj stranici za prebacivanje između lista poruka, prijatelja i pretplatnika. Svi će oni biti zatvoreni u oznake , I . Kartica popisa postova bit će prikazana prema zadanim postavkama, tako da moramo osigurati prilagođenu CSS klasu za aktivnu karticu. U većem projektu bilo bi poželjno koristiti jQuery za promjenu kartica sučelja, ali nisam se želio fokusirati na to jer... Tema lekcije je drugačija. Konačno, imamo sve što nam je potrebno za smještaj svih ulaznih podataka: vanjski spremnik s ID-om, tri kartice za poruke, prijatelje i pratitelje, koji također imaju svoje ID-ove za jednostavno uzorkovanje. Također smo dodali element za one posjetitelje koji ne koriste JavaScript prilikom pregledavanja web stranica. Imajte na umu da ćemo koristiti tmpl dodatak, koji će nam dati mogućnost korištenja jQuery predložaka. Ovaj dodatak se može preuzeti. Malo ranije spomenuo sam posebne stilske listove. Otvorite novu datoteku u svom omiljenom uređivaču teksta i dodajte sljedeći kod: #tweetbox ( display:block; width:300px; padding:10px; border:1px solid #aaa; -moz-border-radius:5px; border-radius:5px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; boja pozadine:#eee; ) #tweetbox img ( display:block; ) #user ( margin-bottom:10px; float:left; ) #user h2 ( margin:0 0 10px 0; position:relative; font-size:18px; ) #user img ( float:left; ) #user p ( width:230px; margin:0; position:relative; float:left; font-size:10px; color:#333; ) #user img ( display:block; margin-right:10px; border:3px solid #333; ) #tools ( margin:0; *margin-bottom:-10px; padding:0; clear:both; list-style-type:none ; ) #tools li ( float:left; ) #tools a ( display:block; height:20px; padding:3px 24px; border:1px solid #aaa; border-bottom:none; -moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; margin-right:-1px; position:relative; font-size:14px; outline:none; background-color:#d6d6d6; background-image:-webkit-gradient(linearno , lijevo gore, lijevo dolje, boja-stop(0.5, #E8E8E8), boja-stop(0, #DBDBDB), boja-stop(0.5, #D6D6D6)); pozadinska slika: -moz-linearni gradijent (srednji vrh, #E8E8E8 50%, #DBDBDB 0%, #D6D6D6 50%); ) a ( text-decoration:none; color:#333; ) #tools .on ( height:21px; margin-top:-1px; top:1px; ) #feed ( width:298px; border:1px solid #aaa; clear:both; background-color:#d6d6d6; ) #feed > div ( display:none; ) noscript ( display:block; padding:10px; font-size:13px; color:#333; ) Spremite ovu datoteku kao tweetbox.css u isti direktorij u kojem su vaše HTML stranice. Ovo je samo mali iznos koji možemo odrediti za dizajn našeg widgeta. U kodu koji smo upravo dali, možda ćete primijetiti nekoliko CSS3 trikova: zaobljene kutove (imajte na umu da nam više ne treba -WebKit- za ove svrhe!), kao i neke gradijente za kartice. Treba napomenuti da skrivamo sve blokove, osim jednog - aktivnog. U ovom trenutku widget bi trebao izgledati ovako: Dodavanje skripte Sada napišimo malu skriptu za implementaciju prebacivanja kartica. Napravite novu datoteku i dodajte sljedeći 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"); link .addClass("on"); tweetbox.find("#feed > div").hide(); tweetbox.find("#" + target).show(); )); ))(jQuery); Spremite ovu datoteku (tweetbox.js) u isti direktorij kao i sve ostalo. Ovdje nema ništa komplicirano. Kartice nisu poanta ovog vodiča, pa se neću predugo zadržavati na tome. Skripta radi na sljedeći način: koristimo anonimnu funkciju koja hvata spremnik koji je aktivan. Također ćemo inicijalizirati tri varijable koje ćemo kasnije koristiti. Postavili smo njihovu vrijednost na null. Odabir elemenata provodit će se više puta, tako da neće biti suvišno predmemorirati cijelu stvar, što će pomoći smanjiti broj jQuery zahtjeva. Zatim instaliramo rukovatelj klikovima na kartice koje nisu aktivne i postavljamo odgovarajuće klase za prikaz stilova. Drugim riječima, aktivnu karticu učinimo neaktivnom, a jedna od neaktivnih kartica je aktivna. Prije prikaza sadržaja odabrane kartice sve ih skrivamo i tek tada prikazujemo informacije. Dobivanje podataka Sada počinje zabava. Poslat ćemo zahtjev Twitteru kako bismo dobili podatke za sva 3 taba, a koristit ćemo i dodatak kako bismo mogli koristiti jQuery predloške. Dodajte ovaj kod nakon prethodnog: $.ajaxSetup(( dataType: "jsonp" )); funkcija getTweets() ( $.ajax("http://api.twitter.com/statuses/user_timeline/danwellman.json", ( uspjeh: funkcija(podaci) ( 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(){ // используем шаблоны }); Prvo koristimo metodu ajaxSetup() da odredimo format podataka s kojim ćemo raditi - jsonp. Budući da ćemo pokrenuti više upita, bolje je navesti ovu vrijednost jednom. Zatim pišemo 3 standardne metode u smislu funkcionalnosti, u kojima koristimo zasebne ajax() metode. Poslat će zahtjev usluzi Twitter i vratiti podatke. Za zahtjev ćemo koristiti posebne ključne riječi: user_timeline, friends i followers. Kako bismo bili sigurni da će podaci biti generirani nakon uspješnog zahtjeva, uključit ćemo naš kod u blok uspjeha. Svaka od ovih funkcija vratit će 100 dobro upakiranih Twitter podatkovnih objekata. Za croque nam ne treba toliko podataka, pa ćemo u niz staviti samo 5 objekata. Kako bismo bili sigurni da generiramo JSON podatke u ispravnom formatu, ključeve svakog elementa stavljamo u dvostruke navodnike. Ove su funkcije gotovo identične jedna drugoj. Imajte na umu da za svaki zahtjev koristimo vlastite jedinstvene ključne riječi. Na kraju svake funkcije dodjeljujemo akumulirane nizove elementima koji su sadržavali nulte vrijednosti (formirane gore). Primijetite da ne pozivamo samo naše tri metode - mi koristimo metodu when() koja će pokrenuti svoj sadržaj tek kada se tri metode završe. Nakon što sve tri funkcije vrate uspjeh, pokrenut ćemo metodu then(), gdje će se nalaziti funkcionalnost predloška. Usput. U ovom kontekstu, također možete navesti metodu fail(), koja će se pokrenuti ako zahtjevi prema Twitteru ne uspiju. Sve je to jako cool, budući da ranije verzije jQueryja nisu pružale takvu funkcionalnost. Sekundarne funkcije U prethodnom primjeru koristimo neke pomoćne funkcije convertDate() i breakTweet(). Evo njihovog sadržaja: //format datuma convertDate = function(obj, i) ( if (window.ActiveXObject) ( obj[i].created_at = obj[i].created_at.replace(/[+]\d(4)/, "") ; ) var days = ["ned", "pon", "uto", "srijeda", "čet", "pet", "sub"], datum = novi datum(obj[i].created_at), formattedTimeStampArray = .created_at], date.toLocaleDateString(), date.toLocaleTimeString()]; return 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; } funkcija convertDate(): Prije svega, provjeravamo koristi li preglednik window.ActiveXObject. Ako je tako, koristimo metodu JavaScript replace() za uklanjanje vremenske zone koja je sadržana u JSON objektu vraćenom s Twittera. Ova metoda koristi regularne izraze za pronalaženje i zamjenu niza. Zatim stvaramo neke varijable; niz koji sadrži skraćene nazive mjeseci. Dani u datumima u JavaScriptu počinju od 0. Zatim stvaramo objekt Date pomoću novog konstruktora Date( i prosljeđujemo datum koji je pohranjen u svojstvu created_at objekta proslijeđenog funkciji. Kreirajmo još jedan niz od 3 elementa: prvi je dan u tjednu, drugi je lokalizirani datum, treći je lokalizirano vrijeme. Nakon što je niz formiran, vraćamo ga. Funkcija breakTweet() malo je kompliciranija. Ovdje trebamo pretvoriti običan tekst u JSON niz, u kojem je svaki element objekt koji sadrži svojstva Name ili Text. Oni će se koristiti u predlošku. Prvo dobivamo tekst iz objekta koji nam je Twitter vratio (proslijedili smo ga funkciji). Ovdje također koristimo regularni izraz koji hvata prisutnost @korisničkih imena. Zatim skeniramo tekst kako bismo pronašli korisničko ime; ako je prisutan, izvadite ga. Dobivamo niz tekstualnih vrijednosti. Prolazimo kroz ovaj niz, tražeći test koji sadrži simbol @; Ako je ovaj simbol prisutan, upišite ga tipkom Name. Ostatak teksta ispisuje se tipkom Text. Generirani objekti smješteni su u niz. To je sve. Upravo smo stvorili objekt koji možemo proslijediti jQuery predlošku. Rad s predloškom Sada kada su svi potrebni podaci generirani, možemo prijeći na posljednji dio naše lekcije: predloške. Vratimo se sadržaju bloka metode then(). Zalijepite kod unutar ovog bloka: //primijeni predloške tweetbox.find("#tweetTemplate").tmpl(tweetData).appendTo("#tweetList"); tweetbox.find("#ffTemplate").tmpl(friendData).appendTo("#friendList"); tweetbox.find("#ffTemplate").tmpl(followData).appendTo("#followList"); //prikaži poruke tweetbox.find("#tweets").show(); Ovdje demonstriram korištenje tmpl() dodatka. U ovom fragmentu prosljeđujemo generirane podatke predlošku, naznačujući koji će ih element primiti. Metoda tmpl() poziva se za svaki element koji još nismo izradili. Pa dodajmo ih. Dodavanje jQuery predložaka Vratimo se ponovno na HTML. Prva stvar koju ćemo učiniti je dodati oznaku odmah nakon praznog ul s id-om “tweetList”: ((svaki tekst)) ((ako Ime)) ((tmpl(Ime) "#atTemplate")) ((else)) $(Tekst) ((/if)) ((/svaki)) $(vremenska oznaka) $($item.data) jQuery predlošci dodaju se na HTML stranicu izravno putem . Svaki takav element mora imati id element kako bi ga metoda tmpl() mogla prepoznati i obraditi. Atribut tipa također mora pohraniti sljedeću vrijednost - text/x-jquery-tmpl. U prvom predlošku dodajemo strukturu koju kasnije želimo prikazati u DOM-u. Konkretno, svaka Twitter poruka bit će okružena oznakama, I . Za umetanje podataka iz JSON objekta koji je prošao kroz tmpl() metodu koristimo niz oznaka predložaka. Zatim koristimo ((svaki)) za ponavljanje kroz svaki element koji je pohranjen u nizu. Ovaj niz sadrži sve Twitter poruke. Za svaki od njih provjeravamo prisutnost ključa Name. Ako je ključ prisutan, koristite oznaku ((tmpl)). U zagradi nakon tmpl označavamo naziv funkcije kroz koju će podaci prolaziti, a također označavamo id predloška koji ćemo koristiti (pogledat ćemo ga detaljnije za nekoliko minuta). Ako objekt ne sadrži tipku Name, tada imamo posla s čistim tekstom koji ćemo umetnuti pomoću $(text). Ovaj uvjet se postiže pomoću oznaka ((if)) i ((else)). Nakon toga moramo zatvoriti uvjet pomoću ((/if) i na sličan način završiti petlju ((/foreach)). Sada moramo stvoriti vezu koja će voditi izravno na Twitter. Da bismo to učinili, koristimo $(tweetlink) kao dio atributa href i svojstvo $(timestamp). Ovo su podaci koje smo izradili i uspješno obradili pomoću zahtjeva user_timeline. Na isti način, moramo stvoriti kartice za prikaz naših prijatelja i pratitelja. Stvorit ćemo ih prema potpuno istom principu. Postoji jedna baza za sve: $(zaslonsko ime)$(desc) Tako smo naučili kako prenijeti podatke u predložak pomoću jsona i ispisati ih pomoću $(data); Završni dodir Sada kada je sve gotovo spremno, možemo dodati još nekoliko CSS stilova kako bi sve izgledalo koliko-toliko pristojno. Dodajte sljedeći kod na kraj tweetbox.css datoteke: #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:last-child p ( border-bottom:none; ) #feed p ( padding:10px; margin:0; border-bottom:1px solid #eee; background-image:-webkit-gradient(linearno , lijevo dolje, lijevo gore, boja-stop(0.48, #c2c2c2), boja-stop(0.71, #d6d6d6)); pozadinska slika:-moz-linearni-gradijent(centralno dno, #c2c2c2 48%, #d6d6d6 71 %); ) #feed p:after ( content:""; display:block; width:100%; height:0; clear:both; ) .tweet-link ( display:block; margin-top:5px; color: #777; ) .img-link ( display:block; margin:4px 10px 0 0; float:left; ) #feed .username a ( font-size:14px; font-weight:bold; ) #feed .bio ( display :block; margin-top:10px; ) Nakon spremanja datoteke, naša aplikacija će izgledati ovako: Postoji još jedna stvar koju bismo vjerojatno trebali implementirati: trenutno naše formatiranje ne radi u IE-u jer IE ne podržava metodu split(). Kako bismo riješili ovaj problem, možemo upotrijebiti izvrsnu JavaScript zakrpu koju je stvorio Steven Levithan. Može se preuzeti s: http://blog.stevenlevithan.com/archives/cross-browser-split. Povežimo ovaj kod pomoću uvjetnog komentara: Ovaj kod mora se dodati neposredno prije uključivanja datoteke tweetbox.js. Zaključak U ovom vodiču pogledali smo neke od naprednijih značajki izrade predložaka u jQueryju. Upoznali smo se s iterativnom petljom ((each)) i uvjetima ((if)) i ((else)). Ključna stvar je da nam jQueryjev novi sustav za izradu predložaka omogućuje da podijelimo naš kod, premještajući sve HTML isječke iz JS datoteka natrag u HTML datoteku. Neki bi mogli tvrditi da sada jednostavno povećavamo broj oznaka na našoj stranici. Ipak, mislim da je ova alternativa bolja. Elementi u formatu $("") su jednostavno nizovi (naravno, sve dok se preglednik ne pokrene i ne stvore i umetnu u DOM). Također smo pogledali novu metodu when() dodanu u JQuery 1.5, koja vam omogućuje upravljanje mnogim asinkronim zahtjevima. Zatim smo koristili then() metodu. Ova će funkcija pokrenuti svoj sadržaj tek nakon završetka svih asinkronih procesa. Nadam se da vam je članak bio koristan. Hvala vam na pažnji. 4. listopada 2010. objavljena je najava tri jQuery dodatka, kreirana uz podršku Microsoft tima. Ovi dodaci — dodatak jQuery Templates, dodatak jQuery Data Link i dodatak jQuery Globalization — označeni su kao “Službeno podržani dodaci projekta jQuery”. Dodatak predloška koristi se kada je potrebno prikazati podatkovni objekt ili niz objekata u označavanju stranice. Dodatak za vezanje podataka potreban je za povezivanje objekata s elementima stranice i sinkronu promjenu vrijednosti. Dodatak za globalizaciju omogućuje prikaz podataka poput brojeva, datuma i vremena, iznosa novca itd. na stranici u skladu s formatom trenutnog jezika. Treba napomenuti da je Microsoftov tim iskoristio svoje veliko iskustvo u ovim područjima, kao i projektni tim jQuery, te su se uz dobro uhodanu interakciju, po mom mišljenju, pokazali izvrsnim alatima za programere. Kako bih potvrdio svoje mišljenje, mogu dodati da su jQuery programeri najavili uključivanje predložaka i dodataka za vezanje podataka u temeljnu jQuery biblioteku već u verziji 1.5, te dodatak za globalizaciju u odgovarajućoj verziji jQuery UI. Dodaci još nisu dobili status izdanja, ali dokumentacija se već aktivno piše na stranici. Usput, Microsoftov tim slijedio je tradiciju razvoja jQueryja i objavio materijale o razvoju dodataka na github.com, gdje su dostupni opisi i izvorni kodovi dodataka. U ovom ću članku govoriti malo o dodatku predloška. jQuery dodatak za predloške Počnimo s jednostavnim primjerom: $(Naziv) ($(Godina izdanja)) var movies = [ ( Naziv: "Crvena violina", Godina izdanja: "1998"), ( Naziv: "Širom zatvorene oči", Godina izdanja: "1999"), ( Naziv: "Nasljedstvo", Godina izdanja: "1976") ]; $("#movieTemplate").tmpl(movies) .appendTo("#movieList"); Dakle, u primjeru je programer stranice opisao predložak za prikaz objekata u obliku oznake (prvi element skripta), onda sam odnekud dobio niz objekata filmovi i pozvao instrukciju za generiranje potrebnog označavanja prema predlošku, uzimajući podatke iz ponuđenog niza objekata i dodajući rezultat na kraj popisa #popis filmova . Kao rezultat rada dodatka, dobit ćemo sljedeće oznake: Crvena violina (1998.) Širom zatvorenih očiju (1999.) Nasljedstvo (1976.) A sada na suštinu pitanja. Što dodatak radi? Dodatak kao ulaz prima niz predložaka i skup objekata (ili jedan objekt) koji se trebaju ispisati u niz (ili oznake) s oblikovanjem. Gdje se ovo primjenjuje? Ovaj dodatak je uglavnom koristan za dinamički prikaz JS objekata na stranici; objekti se mogu dobiti na različite načine, na primjer, tijekom izračuna ili kao rezultat nekih radnji korisnika i, naravno, najčešće citirani primjer je u oblik JSON u odgovoru poslužitelja na AJAX zahtjev. Metode dodataka .tmpl([ podaci ], [ opcije ]) Dohvaća sadržaj prvog odabranog elementa i koristi ga kao predložak za formatirani izlaz navedenih podataka. podaci– podaci koji se ispisuju u predložak (objekt ili niz objekata). opcije– izborno, korisnički definirano proširenje u obliku parova ključ-vrijednost za izlazni objekt u predlošku. jQuery.tmpl(predložak, [ podaci ], [ opcije ]) Koristi navedeni predložak za izradu formatiranog izlaza navedenih podataka. šablona– predložak za formatiranje podataka, može biti jedan od sljedećih tipova: niz s oznakama, HTML element (uključujući jQuery omotač), niz koji odgovara nazivu prethodno kompajliranog predloška. podaci, opcije– imaju isto značenje kao gore .tmplItem() Vraća strukturu (objekt) za prvi odabrani element s rezultatima motora predloška. Objekt koji vraća metoda omogućuje pristup: HTML dijelovi koji čine predložak povezana jedinica prenesenih podataka nadređenom predlošku ako je trenutni predložak ugniježđen trenutni predložak koji se koristi za izlaz korisnički definirano proširenje (polja i metode) proslijeđeno parametru opcija metode tmpl(). Ova se metoda koristi, primjerice, kada nakon formatiranja podataka trebate saznati koji su podaci korišteni za formiranje određenog dijela oznake ili ažurirati dio oznake pomoću novih podataka. jQuery.tmplItem(element) Slično metodi .tmplItem, za element se pretražuje samo struktura s rezultatima mehanizma predložaka element(HTML element, uključujući jQuery omotač). .template([ ime ]) Metoda izrađuje kompiliranu verziju predloška za oblikovanje iz sadržaja prvog odabranog elementa. Ime– opcijski naziv predloška, ​​ako je naziv naveden, tada ga možete koristiti za pristup ovom predlošku u metodi jQuery.tmpl(ime, podaci, opcije) jQuery.template([ ime, ] predložak) Metoda je slična onoj gore opisanoj, samo što se ovdje predložak prosljeđuje kao parametar šablona– to može biti niz, niz s oznakama, HTML element (uključujući jQuery omotač). Sintaksa predloška Ukratko ću opisati nekoliko najosnovnijih elemenata predloška; nadam se da ću ostatak detaljnije opisati u sljedećem članku (ako bude pozitivnog odgovora na ovaj članak) $(fieldNameOrExpression) i ((= fieldNameOrExpression)) Omogućuje umetanje vrijednosti polja (svojstva) podatkovnog objekta u predložak; također se može koristiti za umetanje rezultata metode ili js izraza. Na primjer, "$(ime)"– ubacit će vrijednost polja obj.Name u predložak, a s obzirom da je Languages ​​polje objekta kojem je niz dodijeljen, "$(Languages.length)"– umetnut će duljinu ovog niza u predložak, i na kraju, ako objekt ima getLanguages ​​​​metodu s dva parametra, tada “$(getLanguages(Languages, ‘ – ‘))”– umetnut će rezultat ove metode u predložak. ((html naziv poljaIliizraz)) Element predloška $(polje) (ili ((= polje))) umeće vrijednost navedenog polja kao tekst u rezultat, tj. Ako u nizu postoje HTML oznake, one će biti kodirane, a ne pretvorene u oznake. Ako trebate umetnuti podatke u predložak u obliku HTML oznake, tada morate koristiti sintaksu ((html)) . Za početak s dodatkom, već sam dovoljno rekao o njemu, mogu samo dodati da sintaksa predloška omogućuje umetanje ugniježđenih predložaka, uvjetnih instrukcija, pristup nekim JS i jQuery objektima i još nešto... Ostalo je materijal za budući članak. Izvori Članak je napisan na temelju materijala pronađenih na World Wide Webu. Ovo je uglavnom prijevod službene dokumentacije. Izvornici se mogu pogledati na sljedećim poveznicama: (primjeri preuzeti odatle) o autoru Moje ime je Andrey Zaitsev, profil na zandroid forumu Ovo je moj prvi članak na ovom blogu, nadam se, a ne posljednji. Veliko hvala Gennadyju na prilici za objavljivanje i korisnim savjetima o pisanju i oblikovanju materijala. Primjeri Primjer 1: Dinamičko prebacivanje primijenjenog predloška table ( cursor:pointer; border-collapse:collapse; border:2px solid blue; width:300px; margin:8px; ) table tr ( border:1px solid blue; color:blue; background-color:#f8f8f8; ) table td ( padding:3px; ) table tr:hover ( color:red; ) .movieDetail ( background-color:yellow; ) .movieDetail.row1 ( border-bottom:none; ) .movieDetail.row2 ( border-top:none; )
$(ime)
$(ime)
$(Godina izdanja)	Redatelj: $(direktor)

var movies = [ ( Naziv: "Crvena violina", Godina izdanja: "1998", Redatelj: "François Girard" ), ( Naziv: "Širom zatvorene oči", Godina izdanja: "1999", Redatelj: "Stanley Kubrick"), (Naziv: "The Inheritance", ReleaseYear: "1976", Redatelj: "Mauro Bolognini" ) ]; var selectedItem = null; /* Prikaz predloška sažetka s podacima "filmovi" */ $("#summaryTemplate").tmpl(movies).appendTo("#movieList"); /* Dodajte onclick rukovatelje za stavke predloška filma pomoću predloška sažetka ili detalja */ $("#movieList") .delegate(".movieSummary", "click", function () ( if (selectedItem) ( // Postavite predložak na prethodno odabranoj stavci // povratak na predložak sažetka selectedItem.tmpl = $("#summaryTemplate").template(); selectedItem.update(); ) /* Dohvaćanje strukture podataka za stavku predloška kojoj ovaj kliknuti element pripada do i učinite je odabranom stavkom */ selectedItem = $.tmplItem(this); /* Postavite predložak na ovu stavku na predložak detalja */ selectedItem.tmpl = $("#detailTemplate").template(); selectedItem .update(); )).delegate(".movieDetail", "click", function () ( /* Postavite predložak na ovu stavku na predložak sažetka */ selectedItem.tmpl = $("#summaryTemplate").template (); selectedItem.update(); selectedItem = null; ));

Prilično složen i opsežan, koristi nekoliko metoda dodataka odjednom, preuzetih iz.

Primjer 2: Umetanje podataka s oznakom u predložak

.role (font-weight:bold;font-style: italic;) #movieContainer (padding-left: 8px;) $(Naziv)

((html Sinopsis))

/* Podatkovno polje sinopsisa sadrži HTML oznake. */ var movie = ( Name: "Meet Joe Black", Synopsis: "The Grim Reaper (Brad Pitt) visits Bill Parrish (Anthony Hopkins)..." ); /* Prikaz predloška s podacima filma. Predložak koristi oznaku predloška ((html)) za umetanje podataka HTML oznake sinopsisa. */ $("#movieTemplate").tmpl(movie) .appendTo("#movieContainer");

U ovom primjeru, vrijednosti polja jednostavnog niza i vrijednosti s oznakom dodane su u predložak, preuzet odavde.

p.s.

Nisam opisivao primjere, ali ako publika podržava moje inicijative, onda mogu korak po korak opisati što, kako i zašto, te dati još nekoliko primjera.

Postavljajte pitanja o dodatku na forumu, ako ima komentara konkretno na članak, komentirajte ispod.

Pruža mogućnost korištenja predložaka za jednostavno generiranje HTML elemenata iz JavaScript podatkovnih objekata.

Kako bismo izbjegli nesporazume, želio bih vas upozoriti da ovaj modul trenutno nije aktivno razvijen niti podržan, a jQuery tim ne preporučuje njegovu upotrebu. To ne znači da ga ne biste trebali koristiti, ali osjećao sam da je moja dužnost to vam reći prije nego što ga uključite u svoje projekte. Rado bih preporučio neku drugu opciju koja se aktivno razvija, ali još nisam uspio pronaći zamjenu za jQuery Templates koja je i blizu po svojim mogućnostima. Ali čak i uz gore navedeni stav programera prema njemu, ovaj modul i dalje ostaje najbolji.

Povijest modula jQuery Templates prilično je neobična. Microsoft i jQuery tim objavili su da su tri dodatka koja je razvio Microsoft dobila "službeni" status, nešto što nijedan dodatak nikada prije nije postigao.

Nakon nekog vremena, jQuery tim je objavio da ukida ove module i oduzima im službeni status, kao i da ih planira zamijeniti drugim funkcijama. Predviđena zamjena trebala je biti dio jQuery UI biblioteke. Žalosno, ali istinito: ništa od obećanog još nije isporučeno, a odbačeni dodaci još uvijek su dostupni i naširoko se koriste (osobito dodatak za predloške).

Očito je osobna odluka hoćete li koristiti zastarjeli kod ili ne, ali ja osobno volim funkcionalnost koju pružaju predlošci i često je koristim. Međutim, pretpostavljam da u bilo kojem trenutku mogu pogledati izvorni kod i riješiti svaki ozbiljan problem ako se pojavi, a činjenica da ponekad ipak morate pronaći zaobilazna rješenja kako biste prevladali manje poteškoće je plaćena prednostima koje proizlaze iz upotrebe predložaka .

Postavljanje biblioteke jQuery Templates

Prije nego što možete koristiti jQuery predloške, trebate preuzeti biblioteku jQuery predložaka i povezati je sa svojim dokumentom.

Raspakirajte arhivu i kopirajte datoteku jQuery.tmpl.js (razvojna verzija) ili jQuery.tmpl.min.js (razvojna verzija) na svoj web poslužitelj. Sljedeća stvar koju treba učiniti jest dodati element skripte oglednom dokumentu koji uključuje biblioteku predložaka, kao što je prikazano u primjeru u nastavku:

jQuery biblioteka $(function() ( // Ovdje će ići primjer koda )); h1 ( min. širina: 70 px; obrub: debela dvostruka crna; margina-lijevo: auto; margina-desno: auto; poravnanje teksta: središte; veličina fonta: x-veliko; ispuna: ..png"); pozadina- veličina: sadrži; margina-top: 0; .dtable (prikaz: tablica;).drow (prikaz: redak-tablice;).dcell (prikaz: ćelija-tablica; padding: 10px;).dcell > * (okomito poravnanje : sredina) unos (širina: 2em; poravnanje teksta: desno; obrub: tanka puna crna; padding: 2px;) oznaka (širina: 6em; padding-lijevo: .5em; prikaz: inline-block;) #buttonDiv ( tekst -align: center;) gumb (padding: 12px;) #oblock (display: block; margin-left: auto; margin-right: auto; min-width: 700px; ) Cvjećarna Narudžba

Koristit ćemo ovaj kôd kao ogledni dokument u ovom članku. Vjerojatno ste primijetili da se razlikuje od izvorne verzije o kojoj smo ranije govorili ne samo po tome što joj je dodana biblioteka predložaka, već i po tome što su elementi koji odgovaraju različitim vrstama cvjetnih proizvoda uklonjeni. To je učinjeno posebno kako bismo te elemente u dokumentu mogli vratiti na različite načine pomoću biblioteke predložaka.

Izgled izvornog dokumenta u prozoru preglednika u ovoj fazi prikazan je na slici:

Primjer jednostavnog predloška podataka

Najbolji način da naučite obrasce podataka je da počnete trčati. Kako bismo demonstrirali osnovne mogućnosti predložaka, koristimo primjer koda u nastavku:

... $(function() ( var data = [ ( name: "Astra", product: "astor", stocklevel: "10", price: 2.99), ( name: "Narcis", product: "daffodil", razina zalihe: "12", cijena: 1,99), ( naziv: "Rose", proizvod: "ruža", razina zalihe: "2", cijena: 4,99), ( naziv: "Božur", proizvod: "božur", razina zalihe: "0", cijena: 1,50), ( naziv: "Primula", proizvod: "primula", razina zaliha: "1", cijena: 3,12), ( naziv: "Snjegulja", proizvod: "snjegulja", razina zalihe: "15 ", cijena: 0,99), ]; $("#flowerTmpl").tmpl(data).appendTo("#row1"); )); .png"/> $(ime): ...

U sljedećim odjeljcima razdvojit ćemo primjer na zasebne dijelove i analizirati kod za svaki od njih zasebno. Kada su podaci dio dokumenta, nazivaju se ugrađeni podaci. Alternativa njima su udaljeni podaci, pohranjeni na poslužitelju odvojeno od dokumenta. Pogledat ćemo udaljene podatke malo kasnije, ali za sada možete vidjeti da je ovaj problem usko povezan s podrškom za Ajax koju pruža jQuery.

Definicija podataka

Primjer počinje s definicijom podataka. U našem slučaju, podaci su niz objekata, od kojih svaki opisuje zasebnu vrstu cvjetnog proizvoda. Relevantni isječak koda je ispod:

Var data = [ ( naziv: "Astra", proizvod: "astor", razina zaliha: "10", cijena: 2,99), ( naziv: "Narcis", proizvod: "daffodil", razina zaliha: "12", cijena: 1,99 ), ( naziv: "Ruža", proizvod: "ruža", razina zalihe: "2", cijena: 4,99), ( naziv: "Božur", proizvod: "božur", razina zalihe: "0", cijena: 1,50), ( naziv: "Primula", proizvod: "primula", razina zaliha: "1", cijena: 3,12), ( naziv: "Snjegulja", proizvod: "snjegulja", razina zalihe: "15", cijena: 0,99), ];

Podaci se izražavaju kao jedan ili više JavaScript objekata. Knjižnica za izradu predložaka jQuery pruža znatnu fleksibilnost u odabiru objekata koji se mogu koristiti kao podaci, ali je format koji je gore prikazan, a koji odgovara formatu podataka JSON, najčešći. Format JS0N vrlo je važan jer se često koristi pri radu s Ajaxom.

U ovom primjeru niz se sastoji od šest objekata, od kojih svaki ima niz svojstava koja opisuju određeni proizvod: naziv za prikaz, naziv proizvoda, broj dostupnih jedinica i cijenu.

Definicija predloška

Kao što vjerojatno možete pogoditi, središnji element biblioteke predložaka je predložak podataka. To je zbirka HTML elemenata koji sadrže rezervirana mjesta koja odgovaraju različitim svojstvima podatkovnih objekata. Predložak za ovaj primjer prikazan je u nastavku:

.png"/> $(ime):

Prvo što treba primijetiti je da je predložak smješten u element skripte čiji je atribut tipa postavljen na nepostojeći tip - tekst/x-jquery-tmpl. Ovo je učinjeno kako bi se spriječilo da preglednik pokuša protumačiti sadržaj predloška kao regularnu HTML oznaku. Iako nije neophodna, ovu praksu treba slijediti jer je izuzetno korisna i omogućit će vam da izbjegnete mnoge potencijalne probleme u budućnosti.

Druga stvar koju želim istaknuti jest da se atribut id koristi za imenovanje predloška definiranog u elementu skripte. U ovom slučaju naziv predloška je flowerTmpl. Da biste primijenili predložak na podatke, morate znati njegov naziv.

Sadržaj predloška primijenit će se na sve objekte u nizu podataka, što će rezultirati skupom HTML elemenata za svaki objekt. Možete vidjeti da struktura predloška općenito odgovara skupu elemenata koji su korišteni u prethodnim člancima za predstavljanje različitih vrsta cvjetnih proizvoda. Glavna razlika između njih su elementi koda koji djeluju kao rezervirana mjesta za podatke.

Tijekom obrade predloška, ​​svako rezervirano mjesto zamjenjuje se vrijednošću svojstva preuzetom iz trenutnog objekta. Na primjer, za prvi objekt niza, umjesto rezerviranog mjesta $(proizvod), bit će zamijenjena vrijednost svojstva proizvoda, tj. "Astor". Dakle, dio obrasca

$(ime):

pretvara se u sljedeći HTML fragment:

Astra:

Zamjena vrijednosti nije jedina stvar koju predlošci mogu učiniti. Njihove druge mogućnosti razmatraju se u nastavku.

Primjena predloška

Metoda tmpl() koristi se za kombiniranje predloška s podacima. Kada to učinite, odredite podatke koji će se koristiti i predložak koji ćete na njih primijeniti. Primjer korištenja ove metode dan je u nastavku:

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

Ovdje odabiremo element koji sadrži predložak pomoću funkcije $() za tu svrhu i pozivamo metodu tmpl() na rezultirajućem rezultatu, prosljeđujući joj podatke koje želimo obraditi kao argument.

Metoda tmpl() vraća standardni jQuery objekt koji sadrži elemente izvedene iz predloška. U ovom slučaju, to rezultira skupom divova, od kojih svaki sadrži img, label i elemente unosa konfigurirane za jedan od objekata sadržanih u nizu podataka. Metoda appendTo() koristi se za umetanje cijelog skupa kao podređenog elementa u element row1. Rezultat je prikazan na slici:

Modificiranje rezultata

Dobiveni rezultat nas ne zadovoljava u potpunosti, budući da su svi elementi koji odgovaraju različitim bojama prikazani u jednom retku. Ali budući da imamo posla s jQuery objektom, raspoređivanje elemenata na način na koji želimo ne bi trebalo biti previše teško. Primjer u nastavku pokazuje kako se to može učiniti manipuliranjem izlazom metode tmpl():

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

U ovom primjeru, metode slice() i end() koriste se za sužavanje i proširenje skupa odabranih elemenata, a metoda appendTo() za dodavanje podskupova elemenata koje generira predložak u različite retke.

Imajte na umu da je za vraćanje skupa u stanje u kojem je bio prije korištenja slice() i appendTo() end() morao biti pozvan dva puta zaredom. U ovome nema ničeg protuzakonitog i rado koristim metodu end() da obavim stvari u jednoj izjavi, ali sekvenca end().end() me ne uzbuđuje. U takvim slučajevima radije rastavljam cijeli niz radnji u niz pojedinačnih operacija, kao što je prikazano u primjeru u nastavku:

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

U oba slučaja rezultat će biti isti: prikaz kolekcije proizvoda u dva reda, od kojih svaki prikazuje tri vrste boja, kao što je prikazano na slici:

Promjena načina unosa

Drugi mogući pristup je promjena načina na koji se podaci prosljeđuju metodi tmpl(). Odgovarajući primjer dat je u nastavku:

Var predložak = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2");

U ovom scenariju, raspodjela elemenata u retke vrši se dvaput korištenjem predloška - jednom za svaki red. Odgovarajući dio podatkovnih objekata prosljeđuje se predlošku svaki put pomoću metode slice(). Unatoč razlici između ovog pristupa i prethodnog, dobivamo isti rezultat koji je prikazan na gornjoj slici.

Vrednovanje izraza

Podatkovni objekti mogu se koristiti za više od pukog dobivanja vrijednosti svojstava. Ako postavite JavaScript izraz između dvije vitičaste zagrade, mehanizam predloška će ga procijeniti i umetnuti u HTML oznake koje generira predložak. Odgovarajući primjer dat je u nastavku:

$(ime):

U ovom obrascu, atribut vrijednosti ulaznog elementa postavljen je na temelju vrijednosti svojstva razine zaliha pomoću ternarnog uvjetnog operatora. Izraz u vitičastim zagradama ima istu ulogu koju bi imala izravna vrijednost svojstva zapisanog na njegovom mjestu. Ako je vrijednost svojstva stocklevel veća od nule, tada je vrijednost postavljena na 1, inače - na 0.

Rezultirajuća stranica u prozoru preglednika prikazana je na donjoj slici. Vrijednost zaliha veća od nule postavljena je za sve boje osim božura:

Ovaj primjer ilustrira osnovni način rada s predlošcima: podaci se kombiniraju s predloškom kako bi se proizveli DOM objekti, koji se zatim dodaju dokumentu pomoću osnovne funkcije jQuery. Za generiranje sadržaja možete koristiti ili izravno navedene vrijednosti ili izračunate izraze.

Korištenje varijabli predloška

Predlošci nisu JavaScript skripte. Svaki sadržaj koji dodate elementu skripte smatra se dijelom predloška i bit će uključen u izlaz. Kako bi predlošci bili fleksibilniji, nudi vam se mali broj varijabli konteksta koje se mogu koristiti u deskriptorima rezerviranih mjesta. Kratak opis ovih varijabli nalazi se u tablici ispod:

Korištenje varijable $data

Varijabla $data vraća trenutni podatkovni element na koji je primijenjen predložak. Na primjer, korištena varijabla $data će redom referencirati svaki od objekata koji odgovaraju različitim vrstama boja. Za dobivanje podataka u prethodnom primjeru, predložak je koristio ternarni uvjetni operator. Ovaj pristup je sasvim prihvatljiv, ali čitanje dobivenih predložaka često uzrokuje poteškoće, koje je, naravno, poželjno izbjegavati.

Uvijek pokušavam zadržati svoj kod predloška na potrebnom minimumu i stoga radije koristim varijablu $data unutar JavaScript funkcija koje zatim pozivam iz predloška. Odgovarajući demo je dan u nastavku:

$(function() ( var data = [ ( name: "Astra", product: "astor", stocklevel: "10", price: 2.99), ( name: "Narcis", product: "daffodil", stocklevel: " 12", cijena: 1,99), ( naziv: "Ruža", proizvod: "ruža", razina zalihe: "2", cijena: 4,99), ( naziv: "Božur", proizvod: "božur", razina zalihe: "0" , cijena: 1,50), ( naziv: "Primula", proizvod: "primula", razina zalihe: "1", cijena: 3,12), ( naziv: "Snowdrop", proizvod: "snowdrop", razina zalihe: "15", cijena : 0,99), ]; var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)) .appendTo("#row2"); )); funkcija stockDisplay(product) ( return product.stocklevel > 0 ? 1: 0; ) .png"/> $(name):

Ovaj primjer definira funkciju stockDisplay() koja vraća vrijednost koja bi trebala biti prikazana u ulaznom elementu. Argument ove funkcije je podatkovni objekt, koji dobivamo unutar predloška pomoću varijable $data. S obzirom da se radi samo o jednostavnom ternarnom operatoru, razlika u čitljivosti koda u odnosu na prethodnu verziju nije značajna, ali u slučaju složenijih izraza ili u slučaju ponovljene upotrebe izraza unutar istog predloška, biti puno uočljiviji.

Budite oprezni pri definiranju funkcija koje će se pozivati ​​iz predloška. Poanta je da takve funkcije moraju biti definirane prije pozivanja metode tmpl(). Uvijek ih pokušavam staviti na kraj elementa skripte, ali ako funkcija mora biti unutar spremnog rukovatelja događajima, onda svakako trebate provjeriti je li prethodno definirana. Druga uobičajena pogreška je da je funkcija često definirana unutar predloška.

Korištenje funkcije $() unutar predloška

Rezervirana mjesta koja se koriste unutar predloška mogu koristiti funkciju jQuery $(), ali važno je upamtiti da elementi generirani predloškom nisu priloženi dokumentu i stoga neće biti uključeni u jQuery skupove odabira. Rijetko koristim ovu značajku jer me obično više zanimaju elementi i povezani podaci koje sam generiram.

Korištenje varijable $item

Objekt koji vraća $item služi u nekoliko svrha. Prvi je omogućiti razmjenu dodatnih podataka između JavaScript skripte i predloška. Odgovarajući primjer je dat u nastavku:

$(function() ( var data = [ ( name: "Astra", product: "astor", stocklevel: "10", price: 2.99), ( name: "Narcis", product: "daffodil", stocklevel: " 12", cijena: 1,99), ( naziv: "Ruža", proizvod: "ruža", razina zalihe: "2", cijena: 4,99), ( naziv: "Božur", proizvod: "božur", razina zalihe: "0" , cijena: 1,50), ( naziv: "Primula", proizvod: "primula", razina zaliha: "1", cijena: 3,12), ( naziv: "Snowdrop", proizvod: "snowdrop", razina zalihe: "15", cijena : 0,99), ]; $("Današnja posebna ponuda: " + "50 centi popusta") .insertAfter("h1") .css(( boja: "red", fontSize: "14pt", textAlign: "center " ) ); var options = ( discount: $("#offer").data("discount"), stockDisplay: function(product) ( return product.stocklevel > 0 ? 1: 0; ) ); var template = $ (" #flowerTmpl"); template.tmpl(data.slice(0, 3), options).appendTo("#row1"); template.tmpl(data.slice(3), options).appendTo("#row2 ") ;)); .png"/> $(ime):

U ovom primjeru stvaramo objekt opcija koji definira svojstvo (popust) i metodu (stockDisplay()). Ovaj se objekt zatim prosljeđuje metodi tmpl() kao drugi argument. Varijabla $item omogućuje pristup svojstvima i metodama objekta iz predloška. Kao što vidite, za rukovanje popustom na cijenu ovdje se koristi svojstvo popusta objekta opcija.

Želio bih vam skrenuti pozornost na potrebu uključivanja prefiksa $ u nazive varijabli konteksta: $item i $data. Isti je prefiks također potreban u konstrukciji deskriptora predloška $(...), koji se koristi za zamjenu vrijednosti u predlošku. Izostavljanje bilo kojeg od ovih prefiksa jedna je od najčešćih pogrešaka.

Kasnije ćemo govoriti o drugim primjenama ovog objekta.

Korištenje ugniježđenih predložaka

Prilikom izrade složenih aplikacija ponekad ima smisla razbiti veliki predložak na nekoliko dijelova koji se kombiniraju u fazi izvođenja aplikacije. Kao što će biti pokazano kasnije, ova metoda kombiniranja predložaka omogućuje fleksibilniju kontrolu izlaza. Počet ćemo s najosnovnijim. Primjer u nastavku pokazuje kako jedan predložak može referencirati drugi:

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

U ovom primjeru predložak je podijeljen na dva dijela. Prvi od njih, predložak flowerTmpl, poziva se za svaki element niza podataka. Ovaj predložak zauzvrat poziva predložak inputTmpl za stvaranje ulaznih elemenata. Drugi predložak poziva se pomoću oznake ((tmpl)). Ovaj poziv zahtijeva tri argumenta. Prva dva su trenutna stavka i objekt opcija; ovi argumenti su u zagradama. Treći argument je predložak za poziv. Može se navesti jQuery selektorom (kao što je učinjeno gore) ili varijablom ili funkcijom definiranom u skripti.

Korištenje uvjetnih uzoraka

Predložak omogućuje dinamičko donošenje odluka o korištenju različitih dijelova predloška ovisno o ispunjavanju određenih uvjeta. Za to postoje deskriptori ((if)) i ((/if)), primjer njihove upotrebe prikazan je u nastavku:

... ((ako je razina zaliha > 0)).png"/> $(ime): ((/ako))

Uvjet je naveden u ((if)) deskriptoru, a dio predloška između ovog deskriptora i ((/if)) deskriptora koristit će se samo ako uvjetni izraz ima vrijednost true. Ako je ovaj rezultat lažan, tada se navedeni dio predloška zanemaruje. U ovom slučaju provjerava se vrijednost svojstva stocklevel, a ako je jednaka nuli, tada se cijeli predložak flowerTmpl zanemaruje. To znači da će biti prikazani samo oni proizvodi koji su na zalihi, kao što je prikazano na slici:

Složeniji uvjeti mogu se specificirati pomoću ((else)) deskriptora, koji vam omogućuje da specificirate dio uzorka koji bi se trebao koristiti u slučajevima kada izraz u ((if)) deskriptoru ima vrijednost false. Odgovarajući primjer dat je u nastavku:

... ((ako je razina zaliha > 5)) .png"/> $(ime): ((inače razina zaliha > 0)) .png"/> $(ime): (Mali iznos) ((drugo)) .png " style="opacity:0.5"/> $(name) (Nema na zalihama) ((/if))

U ovom scenariju skup prikazanih stavki određen je brojem jedinica svake vrste proizvoda na zalihi: više od pet, pet, manje od pet ili nema na zalihi. Uveo sam samo manje razlike između elemenata generiranih za svaki od ovih uvjeta, ali možete slobodno koristiti ove značajke za generiranje potpuno drugačijeg sadržaja. Na kraju, ako je potrebno, možete pozvati druge predloške prema uvjetu.

Rezultat gornje skripte prikazan je na slici:

Započnimo Započnimo. Primjer u nastavku prikazuje popis filmova danih u nizu (cijeli kod za primjer je u datoteci BasicSample1.htm):

Jednostavan primjer (1) $(naslov)

Redatelj: $(redatelj)
Uloge: $(glumci)
Godina: $(godina)

$(funkcija () ( $("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag"); )); Jednostavan primjer (1)
A ovo je ono što ćete vidjeti u pregledniku:

Pogledajmo detaljnije ovaj primjer.

Dakle, prvo što radim je povezivanje jQuery Core Library I jQuery predlošci:

To je već više puta rečeno jQuery predlošci bit će uključeni u jQuery Core Library- ali u jQuery 1.5 RC1, objavljenom 24. siječnja, još uvijek nedostaju predlošci.

Zatim učitavam popis filmova:

Naravno, možete pripremiti izvorne podatke na bilo koji način koji vam odgovara - primiti ih pomoću AJAX zahtjeva, kreirati ih na temelju korisničkog unosa itd., ja koristim statičku skriptu samo za primjer.

Unutar datoteke DataItems.js kako slijedi:

Var dataItems = [ ( naslov: "Bandits", sličica: "Bandits.jpg", redatelj: "Barry Levinson", glumci: ["Bruce Willis", "Billy Bob Thornton", "Cate Blanchett"], godina: 2001., proračun: 95000000, bruto prihod: 67631903, ocjena: 0, okviri: ["Bandits-1.jpg", "Bandits-2.jpg", "Bandits-3.jpg", "Bandits-4.jpg", "Bandits- 5.jpg"] ), ...
Sljedeći korak je stvaranje predloška:

$(naslov)

Redatelj: $(redatelj)
Uloge: $(glumci)
Godina: $(godina)

Imajte na umu da se predložak nalazi u oznaci SCENARIJ, i kao MIME vrstu koju sam naveo tekst/x-jquery-tmpl. Kada naiđe na nepoznatu MIME vrstu prilikom analize dokumenta, preglednik ne pokušava protumačiti sadržaj oznake SCENARIJ, što je ono što mi treba.

Općenito govoreći, predložak se može postaviti u bilo koju oznaku, na primjer u oznaku DIV:

$(naslov)

Redatelj: $(redatelj)
Uloge: $(glumci)
Godina: $(godina)

Međutim, u ovom slučaju, nuspojave se ne mogu izbjeći, jer preglednik će svakako pokušati protumačiti kod predloška.

Na primjer, gornji primjer pokušat će učitati nepostojeću sliku:

Ali u slučaju tablice sve može biti puno zanimljivije (veliko hvala TEHEK-u na ovom primjeru!):

((svaka podatkovna stavka)) ((/svaki))

$(naslov)

$(redatelj)

$(godina)

Internet Explorer i Opera ispravno će obraditi ovaj kod:

Ali Chrome i Fire Fox će "gurnuti" dodatni kod izvan tablice, što će rezultirati praznom tablicom... Sretno uklanjanje pogrešaka! ;-)

Za oznaku IZABERI uočit će se slična slika.

Konačno, instanciram predložak sa sljedećim pozivom:

$("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag");
Ilustrirao sam što se događa na donjem dijagramu:

metoda .tmpl() dobiva tekst predloška - tj. unutarnji tekst element dobiven pozivanjem $("#movieTmpl").

Tekst predloška se kompilira i na temelju njega se stvara JavaScript funkcija.

Stvara se “instanca predloška” - objekt koji sadrži referencu na podatkovni element (polje podaci) proslijeđen kao argument metode .tmpl(). metoda .tmpl() možete proslijediti niz, objekt, ništavan ili nazvati bez argumenata. Ako proslijedite niz, tada će se za svaki element niza stvoriti vlastita instanca predloška, ​​koja se odnosi na ovaj element; u svim ostalim slučajevima, stvorit će se samo jedna instanca.

Sastavljena funkcija predloška se poziva i prosljeđuje objekt instance. Funkcija vraća tekst predloška u kojem su izvršene sve zamjene.

Tekst dobiven u prethodnom koraku pretvara se u kolekciju HTML elemenata. Reference na ove elemente također su pohranjene u objektu instance (polje čvorovi), što vam omogućuje jednostavno ažuriranje "izlaza" predloška u budućnosti kada se promijene izvorni podaci (pogledajte odjeljak "Dinamičko ažuriranje").

I na kraju metoda .tmpl() vraća jQuery-kolekcija HTML elemenata koji se dodaju dokumentu pomoću poziva appendTo("#movieListBag").

Izrazi Da biste zamijenili vrijednosti u predlošku, upotrijebite oznaku ${...} . Unutar ove oznake možete navesti naziv svojstva objekta proslijeđenog metodi .tmpl(), kao i bilo koji važeći JavaScript izraz, uključujući poziv funkcije.

Korištenje svojstava objekta (element niza):

$(naslov)
Korištenje JavaScript izraza:

Proračun: $$((budget / 1000000).toFixed(0)) milijuna.
Bruto: $$((grossRevenue / 1000000).toFixed(1)) milijuna.

Polja i metode instance predloška Unutar izraza možete pristupiti trenutnoj instanci predloška putem varijable $stavka, a za pristup trenutnom podatkovnom elementu - varijabli $podaci.

Svaka instanca predloška sadrži sljedeća polja:

podaci- sadrži poveznicu na podatkovni element povezan s instancom predloška;

tmpl- sadrži poveznicu na kompilirani predložak koji se koristi za renderiranje;

roditelj- ako je predložak pozvan iz drugog predloška pomoću oznake ((tmpl)), sadrži poveznicu na "roditeljsku" instancu predloška;

čvorovi- nakon renderiranja sadrži poveznice na HTML elemente generirane kao rezultat primjene predloška.

Osim toga, metoda .tmpl() uzima dva argumenta - podaci I opcije. S argumentom podaci ste već upoznali, preko njega se prenosi poveznica na podatkovni element. I koristeći argument opcije, možete proslijediti referencu na objekt, čija će se sva polja i metode prenijeti na svaku instancu predloška stvorenog u metodi .tmpl().

Ispod je primjer korištenja ovog parametra:

$(naslov)

Redatelj: $(redatelj)
Uloge: $(glumci)
Godina: $(godina)
Proračun: milijun dolara ($item.formatBudget(budget)).
Bruto: $$($item.formatGrossRevenue(grossRevenue)) milijuna.

$(funkcija () ( $("#movieTmpl") .tmpl(dataItems, ( formatBudget: funkcija (vrijednost) ( ​​return (vrijednost / 1000000).toFixed(0); ), formatGrossRevenue: funkcija (vrijednost) (​ ​return (vrijednost / 1000000).toFixed(1); ) )).appendTo("#movieListBag"); ));
U ovom primjeru koristim pozive funkcija za formatiranje proračuna i vrijednosti naknade, ali da izbjegnem pretrpavanje globalnog imenskog prostora, proslijedio sam ih kroz parametar opcije, nakon čega su te funkcije postale dostupne kao metode trenutne instance predloška.

Konačno, instanca predloška sadrži metode Ažuriraj() I html(), čiju ću upotrebu prikazati u nastavku.

Kako izgleda sastavljeni predložak? Pomoću metode možete vidjeti kako izgleda sastavljeni predložak .template(), koji samo sastavlja predloške. Ova metoda vraća funkcijski objekt čiji je sadržaj lako vidjeti:

$("#compiledTemplateBag").text("" + $("#movieTmpl").template());
Predložak korišten u gornjem primjeru izgleda ovako kada se kompilira (tekst je oblikovan radi bolje čitljivosti):

Funkcija anonymous(jQuery, $item) ( var $ = jQuery, call, _ = , $data = $item.data; with ($data) ( _.push(" "); if (typeof (naslov) !== "undefined" && (naslov) != null) ( _.push($.encode((typeof (naslov) === "funkcija" ? (naslov).call( $item) : (naslov)))); ) _.push("

Direktor: "); if (typeof (direktor) !== "undefined" && (direktor) != null) ( _.push($.encode((typeof (direktor) === "funkcija" ? (direktor). poziv($item) : (direktor)))); ) _.push("
Uloge: "); if (typeof (glumci) !== "undefined" && (glumci) != null) ( _.push($.encode((typeof (glumci) === "funkcija" ? (glumci) . poziv($item) : (glumci)))); ) _.push("
Godina: "); if (typeof (year) !== "undefined" && (year) != null) ( _.push($.encode((typeof (year) === "function" ? (year). poziv($stavka) : (godina)))); ) _.push("

"); ) povratak _; )
Mislim da biste sada trebali razumjeti kako se obrađuju izrazi navedeni u oznaci ${...} - a ovo vam razumijevanje može značajno pomoći prilikom otklanjanja pogrešaka! Činjenica je da jQuery predlošci izvodi relativno jednostavnu transformaciju teksta predloška, ​​tako da ako pogriješite u izrazu, poruka o pogrešci odnosit će se na tekst rezultirajuće funkcije i često može biti vrlo zbunjujuća.

Nažalost, ako se predložak kompajlira s pogreškom, tada bez posebnih trikova nećete moći vidjeti tekst funkcije s pogreškom, jer odgovarajuća metoda je proglašena privatnom.

Pa to je valjda to za priču o poslu. jQuery predlošci vrijedi ga dovršiti i prijeći na njegovu praktičnu primjenu.

Drugi dio, praktični uvjeti Kako biste primijenili dijelove predloška ovisno o određenim uvjetima, u jQuery predlošci koriste se oznake ((ako))...((drugo))...((/ako)).

Primjer ispod pokazuje upotrebu ovih oznaka (potpuni primjer koda je u datoteci IfElseTag.htm):

Mediji: ((ako $item.data.media == "dvd")) ((else $item.data.media == "blue-ray")) ((drugo)) ((/ako))

Kao što možda pretpostavljate, ovaj kod je namijenjen za prikaz ikone medija na kojem se film nalazi. Evo kako to izgleda u pregledniku:

Kao uvjet u oznakama ((ako)) I ((drugo)) Možete koristiti bilo koji važeći JavaScript izraz.

Obrada zbirki Za obradu zbirki u predlošcima koristite oznaku ((svaki))...((/svaki)). Primjer u nastavku prikazuje upotrebu oznake ((svaki)) za prikaz popisa glumaca (potpuni primjer koda je u datoteci Svaka oznaka1.htm):

Uloge: ((svaki glumac)) $($value) ((ako $index< $data.actors.length - 1}} , {{/if}} {{/each}}

Kao argument za oznaku ((svaki)) možete proslijediti niz, objekt ili jQuery-kolekcija. Unutarnja oznaka ((svaki)) koristi poziv jQuery.each() pa što god dokumentacija govori o ponašanju jest jQuery.each() vrijedi i za oznaku ((svaki)). Primjer ispod pokazuje upotrebu oznake ((svaki)) za prikaz svih svojstava objekta (potpuni primjer koda je u datoteci Svaka oznaka2.htm):

((each $data)) $($index) $($value) ((/each))
Unutar oznake ((svaki)) dostupne su dvije varijable: $vrijednost, koji sadrži referencu na trenutni element niza, i $index, koji sadrži indeks trenutnog elementa niza ili naziv svojstva.

Naravno, unutar oznake ((svaki)) možete koristiti druge oznake, a osim toga, i dalje ćete imati pristup varijablama $stavka I $podaci. U navedenom primjeru varijable $index I $podaci zajedno s oznakom ((ako)) koriste se za ispis zareza između imena glumaca - nažalost varijabla $posljednji nije predviđeno, iako bi bilo vrlo korisno!

Konačno, ako ikada budete trebali, možete promijeniti zadane nazive varijabli. U donjem primjeru ova su imena promijenjena u mojIndex I mojaVrijednost(potpuni primjer koda je u datoteci Svaka oznaka3.htm):

Uloge: ((svaki(myIndex, myValue) glumci)) $(myValue) ((ako je myIndex< $data.actors.length - 1}} , {{/if}} {{/each}}
Usput, pokušavam promijeniti ime samo za varijablu $index neće dovesti do ničega dobrog - neće biti pogreške, ali nećete moći dobiti ni pristup trenutnoj vrijednosti!

Ugniježđeni predlošci Predlošci mogu biti vrlo veliki - i tada ih ima smisla podijeliti u nekoliko manjih dijelova ili uključiti ponavljajuće dijelove koje je logično odvojiti u poseban predložak. U jQuery predlošci to se radi pomoću ugniježđenih predložaka, koji se pozivaju pomoću oznake ((tmpl)).

Primjer u nastavku ilustrira kako premjestiti dio koda predloška u drugi predložak (cijeli primjer koda nalazi se u datoteci NestedTemplates1.htm):

...

Redatelj: $(redatelj)
Uloge: ((tmpl "#actorsTmpl"))
Godina: $(godina)

... ((svaki akter)) $($value) ((ako $index< $data.actors.length - 1}} , {{/if}} {{/each}}
U oznaci ((tmpl)) mora biti naznačeno jQuery-selektor predloška koji se poziva ili naziv predloška prethodno spremljenog u predmemoriju. Jer u ovom primjeru drugih argumenata za oznaku ((tmpl)) ne, ugniježđeni predložak primit će isti podatkovni element kao roditelj - ali će imati vlastitu instancu predloška i polje roditelj odnosit će se na nadređenu instancu predloška.

Sljedeći primjer demonstrira prosljeđivanje novog podatkovnog elementa u ugniježđeni predložak i korištenje reference na nadređenu instancu predloška. Kao i u slučaju korištenja metode .tmpl(), ako navedete niz prilikom pozivanja ugniježđenog predloška, ​​predložak će se primijeniti na svaki element niza (cijeli primjer koda nalazi se u datoteci NestedTemplates2.htm):

...

Redatelj: $(redatelj)
Uloge: ((tmpl(glumci) "#actors_template"))
Godina: $(godina)

... $($data) ((if $data !== $item.parent.data.actors[$item.parent.data.actors.length - 1])) , ((/if))
Konačno, posljednji primjer u ovom odjeljku pokazuje kako proslijediti argument ugniježđenom predlošku opcije, a ujedno i demonstrira kao argument opcije može se koristiti za određivanje posljednjeg elementa u obrađenom nizu (potpuni primjer koda je u datoteci NestedTemplates3.htm):

...

Redatelj: $(redatelj)
Uloge: ((tmpl(glumci, ( zadnji: glumci )) "#predložak_glumaca"))
Godina: $(godina)

... $($data) ((if $data !== $item.last)) , ((/if))

Transformacija Još jedna zanimljiva prilika jQuery predlošci povezan je s transformacijom HTML oznaka, za što se koristi oznaka ((omotati))(općenito govoreći, wrap je "omatanje", ali čini mi se da izraz "transformacija" bolje odražava bit onoga što se događa).

Klasičan primjer korištenja oznake ((omotati))- ovo je stvaranje knjižnih oznaka:

Ovako izgleda unutra (potpuni primjer koda je u datoteci Transformacija1.htm):

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

Oh, istok je istok, a zapad je zapad...

((/zamotati))
Početni podaci za transformaciju nalaze se u predlošku tabContent- to je predložak koji ću dalje instancirati.

HTML oznake koje ću transformirati idu u oznaku ((omotati)). Za oznaku ((omotati)) koristi se ista invokacijska notacija kao i za oznaku {}}
U pregledniku bi ovaj primjer izgledao ovako:

Predmemoriranje predložaka u svakom pozivu $("#...") .tmpl(...) sastavlja se predložak, što, unatoč dramatično povećanoj brzini JavaScripta u modernim preglednicima, može imati izuzetno negativan utjecaj na performanse. Programeri jQuery predlošci nije mogao zanemariti ovu očitu činjenicu, pa je u jQuery predlošci osiguran je mehanizam za predkompilaciju i predmemoriju predložaka.

Predložak se kompilira i predmemorira na sljedeći način:

$("#movieTmpl").template("movieTmpl");
Sastavljeni predložak sprema se u internu predmemoriju jQuery predlošci pod imenom filmTmpl. Za pristup predlošku u predmemoriji upotrijebite metodu jQuery.tmpl(), a prvi parametar je naziv predmemoriranog predloška:

$.tmpl("movieTmpl", dataItems).appendTo("#movieListBag");
Primjer u nastavku kreće se kroz popis filmova, koristeći predložak iz predmemorije za prikaz informacija o filmu.

Kod predloška praktički se ne razlikuje od onih koje sam ranije koristio, jedina je razlika što ispod opisa filma postoje dodatne veze za navigaciju (cijeli primjer koda je u datoteci Spremljeni predlošci.htm):

$(naslov)

Redatelj: $(redatelj)
Uloge: $(glumci)
Godina: $(godina)

((ako $item.canMoveBack)) [Natrag]((/if)) ((if $item.canMoveFwd)) [Naprijed]((/ako))
Prateća skripta također je jednostavna:

Var movieIndex = 0; $(funkcija () ( $("#movieTmpl").template("movieTmpl"); updateMovie(); $("#movieBag").delegate(".nav-link", "klik", funkcija () ( movieIndex += parseInt($(this).attr("x-inc")); updateMovie(); )); )); funkcija updateMovie() ( $("#movieBag").empty(); $("#movieBag").append($.tmpl("movieTmpl", dataItems, ( canMoveBack: movieIndex > 0, canMoveFwd: movieIndex< dataItems.length - 1 })); }
Rukovatelj klikom na navigacijsku vezu mijenja indeks odabranog filma i zatim poziva funkciju ažuriraj film(), koji najprije čisti spremnik opisa filma, a zatim ga ispunjava novim podacima.

Evo kako ovaj primjer izgleda u pregledniku:

Preglednik će, naravno, preuzeti odgovarajuću datoteku - ali i dalje nećete moći pristupiti njenom sadržaju.

Ali predložak se još uvijek može staviti u zasebnu datoteku, a to će zahtijevati doslovno jednu dodatnu liniju koda (cijeli primjer koda je u datoteci):

$(funkcija () ( $.get("Templates/DynamicLoading.htm", (), funkcija (templateBody) ( $.tmpl(templateBody, dataItems).appendTo("#movieListBag"); )); ));
Jer u ovom slučaju predložak primamo u obliku teksta; metoda se koristi za njegovo instanciranje jQuery.tmpl(), čiji je prvi argument primljeni tekst predloška.

Da, metoda jQuery.tmpl() se koristi za instanciranje i predmemoriranih predložaka po imenu i predložaka navedenih kao tekst (tradicija!..) - međutim, dovoljno je "pametan" da ih razlikuje jedan od drugog.

Ako trebate učitati više povezanih predložaka, možete koristiti biblioteku WaitSync(pogledajte “Sinkroniziranje asinkronih poziva. WaitSync”) ili napišite vlastiti sinkronizator (potpuni primjer koda je u datoteci):

$(function () ( var ws = new WaitSync(function () ( $.tmpl("movieTmpl", dataItems).appendTo("#movieListBag"); )); $.ajax(( cache: false, url: " Predlošci/MovieTmpl.htm", uspjeh: ws.wrap("MovieTmpl", funkcija (templateBody) ( $.template("movieTmpl", templateBody); )), pogreška: ws.wrap("MovieTmpl", funkcija () ( upozorenje("Pogreška pri učitavanju MovieTmpl.htm!"); )) )); $.ajax(( cache: false, url: "Templates/ActorsTmpl.htm", uspjeh: ws.wrap("ActorsTmpl", funkcija (templateBody) ( $.template("actorsTmpl", templateBody); )), pogreška: ws.wrap("ActorsTmpl", funkcija () ( alert("Pogreška pri učitavanju ActorsTmpl.htm!"); )) )); ));
Imajte na umu da u ovom slučaju predložak glumciTmpl nazvan imenom (datoteka Predlošci\MovieTmpl.htm):

Redatelj: $(redatelj)
Uloge: ((tmpl(glumci, ( zadnji: glumci )) "glumciTmpl"))
Godina: $(godina)

Dinamičko ažuriranje U zadnjem dijelu praktičnog dijela prikazat ću još dva scenarija rada jQuery predlošci- mijenjanje povezanih podataka i zamjena povezanog predloška.

U primjeru ispod, za svaki film, dodana je mogućnost promjene njegove ocjene (cijeli primjer koda je u datoteci DynamicUpdate1.htm):

...
Povezani kôd:

$(funkcija () ( $("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag"); $("#movieListBag").delegate(".rating-button", "klik", funkcija ( ) ( var item = $.tmplItem(this); item.data.rating += parseInt($(this).attr("x-inc")); item.update(); )); ));
Kao što vidite, ovaj kod je vrlo sličan kodu oznaka iz odjeljka "Transformacija", samo kada sam radio s oznakama pristupio sam dijeljenom objektu viewState, a ovdje radim s podacima povezanim s instancom predloška.

U pregledniku ovaj primjer izgleda ovako:

Sljedeći primjer pokazuje zamjenu povezanog predloška (cijeli primjer koda nalazi se u datoteci DynamicUpdate2.htm):

((tmpl "#movieMainTmpl"))

[Više...]

((tmpl "#movieMainTmpl"))

Kadrovi iz filma:

((svaki okvir)) ((/svaki))

[Manje...]

Ovdje koristim dva predloška, filmShortTmpl I movieFullTmpl, čiji je opći dio uključen u predložak filmGlavniTmpl.

Povezani kôd:

$(function () ( var shortTemplate = $("#movieShortTmpl").template("shortTemplate"); var fullTemplate = $("#movieFullTmpl").template(); $.tmpl("shortTemplate", dataItems). appendTo("#movieListBag"); $("#movieListBag").delegate(".more-details", "click", function () ( var item = $.tmplItem(this); item.tmpl = item.tmpl === kratki predložak ? puni predložak: kratki predložak; item.update(); )); ));
Mislim da ovaj kod zahtijeva dodatno objašnjenje.

Za zamjenu predloška potrebna mi je poveznica na kompilirani predložak. Ove veze dobivam putem poziva .template(). Osim toga, jer uzorak kratki predložak koristi se za renderiranje popisa filmova nakon što se stranica učita, spremam ga u predmemoriju kako bih ga mogao instancirati po imenu.

U pregledniku ovaj primjer izgleda ovako:

Zaključak Kôd za primjere korištene u članku možete preuzeti na ovoj poveznici.

preuzimanje datoteka jQuery predlošci možete s web stranice ASP.NET CDN ili izravno iz GitHub repozitorija:
Brian Landau "Usporedna analiza knjižnica predložaka Javascripta."

I na kraju, želio bih izraziti svoju zahvalnost Vitaliju Dilmukhametovu i Denisu Gladkikhu na vrijednim komentarima tijekom rada na članku.

Oznake: Dodajte oznake

 

---

Čitati:
Razlozi kvara vremena na prijenosnom računalu i kako ih popraviti. Postavke datuma i vremena na računalu su izgubljene Postavljanje iPhonea nakon kupnje Kako postaviti iPhone se nakon kupnje Najbolji načini da napravite prekrasnu pozadinu za svoj YouTube kanal Vraćanje Samsung pametnih telefona na tvorničke postavke Što je Power BI i kako s njim raditi?