Kanał ATOM
Autor wpisu: batman, dodany: 04.02.2011 08:00, tagi: javascript, jquery
Przed kilkoma miesiącami na oficjalnym blogu jQuery pojawiła się informacja na temat powstania trzech nowych pluginów, które zostały zaakceptowane jako oficjalne rozszerzenia jQuery. Były to jQuery Templates, jQuery Data Link oraz jQuery Globalization. Według podanej wówczas informacji jQuery Templates miał trafić do głównej biblioteki jQuery wraz z pojawieniem się wersji 1.5. Najwyraźniej ekipa pracująca nad tym pluginiem nie zdążyła na czas i w wydanej kilka dni temu bibliotece, nie uraczymy szablonów. Nic nie stoi jednak na przeszkodzie, aby pobrać ten plugin osobno i już dzisiaj zacząć poznawanie jego możliwości.
Instalacja
Instalacja plginu jest tak samo banalna jak instalacja samego jQuery i sprowadza się do pobrania jego najnowszej wersji ze strony https://github.com/jquery/jquery-tmpl. Następnie wystarczy dołączyć plugin do strony.
Pierwszy szablon
Zanim zaczniemy zagłębiać się w szczegóły szablonów, rzućcie okiem na poniższy kod.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-1.5.min.js"></script>
<script src="jquery.tmpl.min.js"></script>
<script id="szablon" type="text/x-jquery-tmpl">
<tr>
<td>${nazwa}</td>
<td>${cena}zł</td>
<td><a href="/usun?id=${id}">usuń</a></td>
</tr>
</script>
<script>
$(document).ready(function() {
var produkty = [
{ id: 1, nazwa: "Spodnie", cena: "100" },
{ id: 2, nazwa: "Buty", cena: "250" },
{ id: 3, nazwa: "Okulary", cena: "90" },
{ id: 4, nazwa: "Worek", cena: "1" }
];
$("#szablon").tmpl(produkty).appendTo("#produkty tbody");
});
</script>
</head>
<body>
<table id="produkty">
<thead>
<tr>
<th>Nazwa</th>
<th>Cena</th>
<th>Akcja</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
To co widzicie to najprostszy przykład zastosowania szablonów jQuery. Wszystko sprowadza się do stworzenia szablonu HTML w znaczniku script, któremu nadajemy identyfikator (w tym przypadku identyfikatorem jest słowo szablon). Oprócz identyfikatora znacznik ten musi posiadać odpowiedni typ. Jest nim text/x-jquery-tmpl. W przypadku problemów z przeglądarkami, które nie będą poprawnie interpretować tego atrybutu można stosować text/html.
Tagi szablonów oraz nowe metody
W chwili obecnej do jQuery wprowadzone zostały następujące tagi.
- ${} lub ${{= }} – służy do wstawiania do szablonu danych tekstowych
- {{html }} – służy do wstawienia danych w postaci html
- {{if}}, {{else}}, {{/if}} – podstawowa instrukcja warunkowa
- {{each}} – pętla
- {{tmpl}} – renderowanie szablonu w szablonie
- {{wrap}} – możliwość opakowania jednego szablonu innym
Oprócz tagów, do jQuery wprowadzone zostały nowe funkcje. Są to:
- .tmpl() – metoda wywoływana na szablonie. Przyjmuje dwa parametry – dane oraz opcje. Dane mogą zostać przekazane na dwa sposoby. W pierwszym z nich będzie to obiekt, którego klucze będą stanowić zmienne dostępne w szablonie. W drugim sposobie można przekazać tablicę obiektów. Wówczas szablon zostanie wyrenderowany tyle razy, ile elementów będzie miała tablica. Opcje służą do przekazania do szablonu dodatkowych danych. W wyniku działania tej metody uzyskamy kolekcję elementów, które możemy wstawić do drzewa DOM przy pomocy metod .appendTo, .prependTo, .insertBefore oraz .insertAfter.
- jQuery.tmpl() – działa na podobnej zasadzie jak poprzednia metoda, z tą różnicą, że pierwszym argumentem jest treść szablonu, drugim dane, a trzecim opcje.
- .tmplItem() oraz jQuery.tmplItem() – metody, dzięki którym uzyskamy dostęp do danych wyrenderowanego elementu na podstawie szablonu oraz wszystkich informacji powiązanych z tym elementem
- .template() oraz jQuery.template() – metody te umożliwiają na “skompilowanie” szablonu do postaci nazwanego szablonu (named template), do którego możemy się odwoływać po jego nazwie.
Ponieważ w teorii wszystko zawsze wydaje się być bardziej skomplikowane niż to jest w rzeczywistości, przejdźmy do przykładów.
${}
W miejsce tego taga wstawiona zostanie zawartość przypisana pod klucz obiektu przekazanego jako dane do szablonu.
<script id="szablon" type="text/x-jquery-tmpl">
<p>${pole}</p>
</script>
<script>
$(document).ready(function() {
$("#szablon").tmpl({ pole: "zawartosc"}).appendTo("#element");
});
</script>
<div id="element"></div>
Zamiast ${pole} możemy napisać {{= pole}} i efekt będzie identyczny.
Już od dawna nurtował mnie mankament parsowania szablonów w php, trudności z jakimi człowiek się spotykał to niepotrzebne zużycie pamięci do przetworzenie danych w php, działanie na stringach itd. Fascynowała mnie sprawa by tym zajmowała się tylko przeglądarka, niech komputer użytkownika męczy się z wygenerowaniem szablonu. Tylko jak to zrobić? Długo nic nie mogłem na to wymyślić, ale zrobili to za mnie. ExtJS – jest to framework napisany w JavaScript będący częścią innych projektów firmy Sencha. Daje on nam wiele możliwości, począwszy od ingerencji w drzewo DOM, skończywszy na generowaniu UI naszej aplikacji.
Przed majem 2010 roku w świecie PHP poruszałem się głównie z pomocą Zend Frameworka. Kilka lat wcześniej był to autorski framework (netEngine) oraz firmowe frameworki. Z perspektywy czasu uważam, że złe było rozwijanie własnych narzędzi, zamiast pomóc społeczności. Taki zbiorowy projekt jest świetny:
Kiedyś już pisałem o Seo Url na blogu, co prawda temat stary jak świat, ale jakoś nigdy nie miałem koncepcji by to jakoś skrzętnie napisać. Otóż może tak trochę historii, ogólnie routing to wymyślili chłopacy od ruby on rails, napisali i tam im śmigało, następnie paru maniaków przepisało to do pythona, widać mieli w tym jakiś cel (dla mnie to masochizm pisać strony w pythonie ale co ich to ich). I nadszedł czas by ktoś przepisał koncept do PHP. Chwała im za to. A teraz ja ogarnięty szałem pisania swojego systemu, z nadszarpniętą przez kolegę Glossego dumą że pierdzę w stołek i nic nie robię postanowiłem wykorzystać dobrodziejstwo Open Sourcowych Licencji.