Szablony w JavaScript z wykorzystaniem biblioteki mustache.js

 Lut, 24 - 2015   brak komentarzy   JavaScript

mustache.js system szablonów Java ScriptMustache.js to biblioteka, której zadaniem jest oddzielenie logiki aplikacji JavaScript od kodu HTML, poprzez obsługę szablonów. W tym krótkim kursie postaram się pokazać, w jaki sposób pisać szablony dla naszego kodu.

 

 

 

Mustache.js jest określany jako „logic-less template system”, ponieważ bazuje wyłącznie na specjalnych znacznikach i nie używa żadnych warunków, pętli, czy innych wyrażeń logicznych wykorzystywanych podczas programowania. Korzystanie z tej biblioteki nie jest skomplikowane. Wystarczy nauczyć się kilku podstawowych funkcji i tagów, aby z powodzeniem móc pisać swoje własne szablony w JS.

 

 

Podstawy mustache.js

 

W pierwszej kolejności przedstawmy podstawowe elementy omawianej biblioteki, z których najczęściej będziemy korzystać podczas pisania naszych skryptów.

 

Znaczniki:

  • {{zmienna}} – znacznik wyświetlający zmienną
  • {{{zmienna}}} lub {{&zmienna}} – to samo, co powyżej, tylko że znaczniki HTML nie są escape-owane
  • {{#zmienna}} … {{/zmienna}} – sekcja, zawartość pomiędzy tymi znacznikami wykona się 0, 1 lub n razy w zależności od wartości zmiennej – jeżeli wartość zmiennej będzie false, 0, null, itp. to sekcja nie wykona się ani razu
  • {{^zmienna}} … {{/zmienna}} – odwrotność powyższego, tzn. w przypadku gdy zmienna przyjmie wartość false, o, null itp. zawartość sekcji zostanie wyświetlona
  • {{.}} – znacznik służący do wypisania kolejnych elementów w tablicy (zazwyczaj wykorzystywany w sekcji)
  • {{! komentarz}} – zawartość tego znacznika nie zostanie wyświetlona
  • {{> kod_html}} – wydzielony kod HTML jako część szablonu

 

Funkcje:

  • render – zwraca wynikowy kod HTML, przetworzonego z użyciem szablonu i zmiennych – przyjmuje dwa podstawowe argumenty: szablon i obiekt JS
  • parse –analizuje szablon ale go nie używa, jedynie zapisuje do cache – przyjmuje jeden argument: szablon, użycie tej funkcji w pewnych sytuacjach pozwala na przyśpieszenie działania aplikacji (np. na samym początku, w momencie ładowania się naszej aplikacji, można załadować szablony, tak aby później ich renderowanie wykonywało się szybciej)

 

Poniższy kod pokazuje bardzo proste, przykładowe użycie systemu szablonów mustache.js:

 

 

Mamy znacznik <main> kodu HTML, w którym chcemy wyświetlić wynik działania naszego skryptu JS. Do kodu strony dołączamy bibliotekę mustache.js, a następnie zaczynamy pisać kod. W pierwszej kolejności tworzymy obiekt książki book, zawierający tytułu oraz imię i nazwisko autora. Dalej do zmiennej template przypisujemy szablon HTML, złożony z nagłówka i akapitu. Korzystając z odpowiednich znaczników mustache.js, wskazujemy miejsca umieszczenia danych. Następnie korzystając z funkcji render, łączymy szablon z danymi, i na końcu wstawiamy wynik na stronie.

 

 

Wykorzystanie – lista książek

 

Zajmijmy się praktycznym wykorzystaniem biblioteki w przykładowej aplikacji JavaScript. Załóżmy, że mamy do napisania skrypt wyświetlający listę książek w księgarni wraz z ich autorami, ceną, rokiem pierwszego wydania, itd. Nasz kod wygląda następująco:

 

 

Wszystkie skrypty JS umieściłem na dole strony, natomiast jak widać użyty kod HTML jest bardzo prosty, aby nie zaciemniać przykładu. Lista książek będzie wyświetlać się w bloku <div>, poniżej nagłówka <h1>. Podczas pisania naszego skryptu, dla wygody, użyjemy frameworka jQuery. No i oczywiście poniżej załączamy system szablonów mustache.js.

 

Szablon, który będziemy wykorzystywać do pokazania listy, umieśćmy w osobnym znaczniku <script>. Wszystkie książki wypisywane będą jako elementy listy nieuporządkowanej, dlatego użyliśmy znacznika sekcji ({{#books}} … {{/books}}), który będzie przechodził po wszystkich książkach w obiekcie i umieszcza poszczególne informacje w kolejnych pozycjach na liście. W przypadku gdy w bibliotece zabraknie książek, poniżej wywołany zostanie odpowiedni napis, umieszczony w osobnych znacznikach sekcji.

 

Sam kod JavaScript wygląda następująco. Obiekt library zawiera wszelkie dane dotyczące książek. Oczywiście równie dobrze informacje te mogą być asynchronicznie ładowane z serwera lub pobierane z pliku, jednak w opisywanym przykładzie jest to nie istotne. W następnym kroku, do zmiennej booksTemplate, wykorzystując jQuery, przypisujemy wcześniej przygotowany szablon. No i w końcu wykorzystując funkcję render biblioteki mustache.js, tworzymy listę książek i umieszczamy ją w wybrane miejsce na stronie.

 

Na razie wszystko działa fajnie i jak widać nie jest to specjalnie skomplikowane. Spróbujmy rozszerzyć naszą listę o kilka dodatkowych elementów. Po pierwsze, poniżej każdej z pozycji chciałbym wyświetlić listę występujących w książce postaci. Ponadto, podane ceny książek nie uwzględniają podatku VAT, dlatego byłoby dobrze, aby obok każdej z cen pokazać ile wynosi cena brutto (o ile się nie mylę, to obecnie w Polsce podatek ten wynosi 7%). Chciałbym również podać informacje jak dawno temu poszczególna książka była wydane (tzn. ile minęło lat od pierwszego wydania do dziś). Wszystkie te zmiany uwzględnia poniższy listing.

 

 

Nasz kod JS został nieco zmodyfikowany. Na początku dodaliśmy dwie zmienne: do pierwszej z nich przypisaliśmy podatek VAT, do drugiej aktualny rok. Obiekt biblioteki wzbogacił się o kilka dodatkowych elementów. Przy niektórych pozycjach książkowych pojawiła się prosta lista postaci. Dalej dodaliśmy 3 funkcje:

  • arePeople – sprawdza czy dana pozycja posiada jakiekolwiek postacie w tablicy (zwraca wartość logiczną),
  • priceWithVat – oblicza i zwraca cenę książki brutto, z dokładnością do dwóch miejsc po przecinku,
  • yearAgo – oblicza różnicę pomiędzy rokiem obecnym a rokiem wydania.

Każda z tych funkcji zostanie wywołana na rzecz poszczególnych książek w obiekcie biblioteki, podczas kolejnych podczas kolejnych iteracji w szablonie.

 

Szablon również uległ małej zmianie. Obok ceny netto wyświetlana jest cena brutto. Poniżej, obok roku wydania, wstawiana jest różnica lat. W dalszej kolejności sprawdzamy czy dana książka zawiera listę postaci i jeżeli tak, lista ta jest wyświetlana. W tym celu użyty został znacznika {{.}}, którego zadaniem jest proste wypisanie wszystkich elementów w tablicy.

 

W rezultacie otrzymaliśmy prostą listę książek. Wystarczy poprawić wygląd, dodając styl CSS i gotowe.

 

Lista książek w JavaScript przy użyciu szablonów mustache.js

 

 

Podsumowanie

 

Mustache.js to bardzo przydatne narzędzie, umożliwiające w łatwy sposób oddzielenie naszej aplikacji JavaScript od kodu HTML. Z powodzeniem można go używać zarówno w małych jak i dużych projektach. Polecam i zachęcam do korzystania. Jakby ktoś chciał podzielić się swoimi opiniami lub wrażeniami, to bardzo proszę o komentarz.

 

Podczas pisania artykułu korzystałem z dokumentacji na stronie: https://github.com/janl/mustache.js


Przeczytaj równierz


Dodaj komentarz

Twój adres email nie zostanie opublikowany.