Sty
7
2016

System szablonów EJS

EJS (ang. Embedeed Javascript) to system szablonów przeznaczonych do tworzenia funkcjonalnych i przejrzystych widoków wykorzystywanych podczas renderowania stron aplikacji działających na silnikach bazujących na Javascript. Twórcy tego silnika skupili się przede wszystkim na prostocie i funkcjonalności oraz kompatybilności z innymi rodzajami systemów szablonów wykorzystywanych m.in w PHP (Smarty) oraz w Ruby (ERB). EJS pozwala na osadzenie danych zwracanych z warstwy modelowej aplikacji napisanej w Node.js oraz swobodne zarządzanie i formatowanie nimi poprzez możliwość wykorzystania m.in. wyrażeń warunkowych czy iteracji pętli. W celu rozpoczęcia pracy z szablonami EJS należy wymusić na aplikacji włączenie biblioteki EJS.

Dane przekazywane z aplikacji powinny zostać przekazywane jako obiekt, który będzie następnie parsowany przez wybrany szablon. Pliki, które będą definiowane jako szablony powinny posiadać rozszerzenia .ejs i zawierać się w folderze templates, który znajduje się w głównym katalogu aplikacji. Rozważony zostanie poniższy kod:

  1. var app = require(‚express’)
  2. app.set(‚view engine’, ‚ejs’);
  3. app.get(‚/’, function(req, res) {
  4. res.render(‚index’, { title: ‚Główna strona!’ })
  5. });

Zdefiniowany musi zostać framework Express. Następnym krokiem jest ustawienie odpowiedniego silnika szablonu dla aplikacji, który będzie odpowiadał za generowanie szablonów. Kiedy następuje żądanie zasobu głównej strony aplikacji, wykonywana jest funkcja anonimowa, która powoduje renderowanie szablonu o nazwie index, a parametry przekazywane do szablonu to: title.

Silnik szablonów przeszukuje wszystkie pliki zawarte w katalogu templates w celu znalezienia odpowiedniego szablonu, a następnie jeśli znajdzie przekazuje parametry przekazane jako drugi argument funkcji. W przypadku nie znalezienia szablonu, aplikacja zwraca błąd.

Plik index.ejs posiada następującą konstrukcję:

  1. <html>
  2. <div class=„title”>
  3. <%= title %>
  4. </div>
  5. </html>

Powyższy szablon zostanie wygenerowany jako strona HTML z napisem Główna strona! Znacznik otwarcia tagu <% i %> są głównymi specyfikatorami języka szablonów EJS. Pozwalają one na formatowanie danych oraz bezpośrednią modyfikację zwracanych danych. W celu wyświetlenia tekstu dodawany do tagów EJS zostaje dodany znak równości. Jeśli przekazane dane do szablonu są obiektem należy użyć pętli for .. in aby móc iterować po elementach zawartych w przekazanym obiekcie.

  1. var rasyPsow = {„Jamnik”,„Bulterier”, „Pitbull”, „Owczarek Niemiecki”};
  2. app.get(‚/’, function(req, res) {
  3. res.render(‚katalog’, { rasyPsow: rasyPsow })
  4. });

Silnik szablonów wyszukuje w folderze templates plik o nazwie katalog.ejs, a następnie przekazuje do niego obiekt, który jest wyliczalny, a następnie iteruje po wszystkich jego elementach. Wprowadźmy do pliku poniższy kod:

  1. <% if (rasyPsow) {
  2. <% for (var rasa in rasyPsow ) { %>
  3. <%= ‚Rasa: ‚ + rasa + ‚<br/>’ %>
  4. <% } %>
  5. <% } %>

Wykonywane w powyższym kodzie są m.in. instrukcje warunkowe if oraz pętla for .. in znana przede wszystkim z Javascript. Jeśli istnieje dany obiekt definiowana jest pętla, która iteruje po elementach mieszczących się w obiekcie. Podczas definicji pętli tworzymy zmienną lokalną, która będzie przechowywała aktualnie iterowany element. Po uruchomieniu aplikacji zostaną zwrócone poniższe dane:

  1. Rasa: Jamnik
  2. Rasa: Bulterier
  3. Rasa: Pitbull
  4. Rasa: Owczarek niemiecki

Powiązane wpisy

Autor wpisu:

Jakub Kądzielawa - młodszy programista PHP, student Informatyki, który łączy pracę ze swoją pasją. Czasami narzeka na brak wolnego czasu.

Zostaw komentarz