Handlebars template - jak używać w Node.js?

Dzisiaj kontynuuje wątek rozpoczęty w poprzednim wpisie. Pokaże jak przekazywać zmienne, tworzyć warunki czy pętle w Handlebars. Są to podwaliny do stworzenia szablonu, na którym będziemy pracować w naszej aplikacji, którą piszemy w Node.js

Jeśli trafiłeś tutaj przypadkiem, to zapoznaj się przed tym z następującymi tematami:

Dobrze zatem przejdźmy od razu do pliku controllers/homeController.ts, w którym zaczęliśmy renderować nasz widok index.html. Zacznijmy od postaw – przekazywanie zmiennych.

Przekazywanie zmiennych do widoku

Ja zawsze tworze sobie na końcu funkcji obiekt renderData (nie ważne czy to jest Node.js czy PHP) dzięki czemu, widzę wszystkie zdefiniowane wartości w jednym miejscu, bez szukania gdzie jest dany obiekt nadpisany. Także stwórzmy sobie obiekt renderData z polem name i jakąś wartością:

  let renderData = {
        name: 'Dawid'
    };

Skoro mamy taki obiekt, wypadałoby go przekazać do widoku. W ostatnim wpisie wywoływaliśmy to w następujący sposób:

res.render('index');

Teraz wystarczy jako drugi argument funkcji podać nasz obiekt.:

res.render('index.html', renderData);

Podmień w pliku views/index.html zawartość elementu H1 na:

Cześć {{name}}

Uruchom aplikacje i zobacz co się stało. Jest to najprostsza z rzeczy jaką da się zrobić czyli wyświetlić zawartość zmiennej.

Warunki w widokach

Warunek a dokładniej instrukcja warunkowa pomaga nam w wyświetlaniu odpowiednich segmentów bądź tekstu. Także coś prostego teraz zrobimy. Do godziny 17 będziemy się witać tekstem: Dzień dobry {{imie}} natomiast po godzinie 17 będziemy już korzystać z zwrotu Dobry wieczór {{imie}}. Do tego jeszcze te Dobry wieczór niech będzie tak do 4 nad ranem. Także w naszej akcji przekażemy sobie która jest godzina:

    let date = new Date();
    let isDay = (date.getHours() < 17 && date.getHours() > 4);

    let renderData = {
        name: 'Dawid',
        isDay: isDay
    };

Oczywiście można by to ładniej zapisać, ale w naszym wypadku lepiej stworzyć dwie dodatkowe zmienne, aby widzieć co się dzieje. Przejdźmy do widoku i podmieńmy nasz tekst w elemencie H1 na coś takiego:

 
{{#if isDay}}
<h1>Dzień dobry {{name}}
{{else}}
<h1>Dobry wieczór {{name}} 
{{/if}}

Odpowiednio od godziny dostaniemy informacje dzień dobry bądź dobry wieczór. Czyli wszystko okej.

Pętle w Handlebars

Kolejny krok to są pętle – lub iteracje jak kto woli. W dużym skrócie wyświetlanie serii danych np w tabeli, czy liście. Stworzymy sobie listę imion, czyli coś takiego najprostszego:

    let names =  [
        {'name': 'Kasia','sex': 'woman'},
        {'name': 'Marta','sex': 'woman'},
        {'name': 'Ania','sex': 'woman'},
        {'name': 'Jolanta','sex': 'woman'},
        {'name': 'Natalia','sex': 'woman'},
        {'name': 'Aleksandra','sex': 'woman'},
        {'name': 'Tomasz','sex': 'man'},
        {'name': 'Jarosław','sex': 'man'},
        {'name': 'Dawid','sex': 'man'},
        {'name': 'Damian','sex': 'man'},
        {'name': 'Adam','sex': 'man'}
        ];

Natomiast w widoku wpisz:

<ul class="people_list">
    {{#each names}}
    {{this.name}} ({{this.sex}})
    {{/each}}
</ul>

Nie wspominałem przy if, ale i if i each są wbudowanymi helperami, na ten moment własnych helperów pisać nie będziemy. Jednak warto wiedzieć na przyszłość, że to tak się nazywa.

Więc skoro jesteśmy przy each, dostajemy tam specjalną zmieną this, w której mamy konkretny element. czyli w naszym wypadku jeden z powyższych obiektów np:

 {'name': 'Kasia','sex': 'woman'}

Jakbyś zamiast tego obiektu wrzucił zwykła wartość, to po wpisaniu {{this}} dostałbyś tą nazwę. Podsumowując: this jest aktualnym elementem z tablicy.

Tutaj jeszcze jest specjalna zmienna:@index która wskazuje element z tablicy. Przetestuj sobie. Jeśli nie podoba Ci się to, że jako pierwszy element pokazuje zero – to poczytaj o helperach i napisz własny, który będzie inkrementował i wyświetlał tą wartość większą o 1 😉

Dołączanie szablonów do widoków

W każdej stronie pojawiają się stałe elementy strony typu menu, stopka czy slider. Głupio by tak kopiować w kółko ten sam kod na 20 różnych podstronach. Po pierwsze wyobraź sobie, że musisz teraz poprawić jedną literówkę bo zamiast następny napisałeś natepny. Mały błąd, ale teraz poprawiaj 20 razy. Do tego dochodzi kwestia DRY (Don’t Repeat Yourself) – czyli w dużej mierze dbanie o czystość kodu. Do tego służą tak zwane partials.

Stwórzmy sobie stały element strony czyli stopka. Najpierw zdefiniujemy, gdzie te partiale będą. Przejdź do pliku index.ts i w konfiguracji dopisz takie coś:

partialsDir: __dirname + '/views/partials/'

Finalnie będzie wyglądać to tak:

const hbs = handlebarsExpress.create({
        extname: '.html',
        partialsDir: __dirname + '/views/partials/'
    });

Czym jest __dirname już wiesz z poprzedniego wpisu. Natomiast opcja partialsDir wskazuje folder z wszystkimi elementami – partialami. Polecam doczytać co jeszcze można tutaj wrzucić.

Skoro już poinformowaliśmy Node.js i Handlebars gdzie są nasze elementy szablonów, to należy teraz je zrobić. Stwórz folder partials a w nim plik footer.html z następującą treścią:

<footer>
    <p>Wykonano przez {{name}}</p>
</footer>

i wywołaj go w widoku:

 {{> footer }}

Uruchom aplikacje i zobacz, że na dole strony dostaniesz teraz „Wykonano przez Dawid”. Czy partiala użyjesz w layouts/main.html czy w pliku index.html to nie robi różnicy.

Dołączanie plików i stylów

Warto by jeszcze dodać jakieś style css czy obrazki. Nie jest to już bezpośrednio związane z Handlebars, jednak do stworzenia jakiejkolwiek strony jest to rzecz niezbędna (no dobra prawie – bo można pisać cały kod w inline – ale weź to potem popraw…). Także przechodzimy znowu do index.ts i wpisujemy coś takiego:

app.use(express.static(__dirname + '/public'));

Informujemy tym, gdzie znajdują się nasze pliki statyczne. Więc zrób folder public, a w nim folder css i tam plik style.css dla testu zmienimy kolor tła:

body {
    background: #4b4b4b;
}

Teraz przejdź do pliku views/layouts/main.html i dodaj nasze style w sekcji head:

 <link rel="stylesheet" type="text/css" href="css/style.css" />

No i uruchom ponownie aplikacje. Dostaliśmy piękne szare tło.

Na zakończenie

Właśnie wyposażyłem Ciebie w podstawową – minimalną wiedzę, która jest Ci potrzebna do wykonania szablonu do naszego projektu. Wraz z kolejnymi wpisami będę oczywiście wracać do tematu Handlebars i pokaże m.in helpery, do których nie raz jeszcze zapewne wrócimy na łamach tego projektu. Także do zobaczenia w kolejnym wpisie, gdzie razem uczymy się Node.js.

Jednak zanim napiszę coś nowego możesz w tym czasie sam postarać się stworzyć najprostszy szablon, do naszej aplikacji.

Wszystko to co pokazałem, staram się pokazywać w najprostszy sposób – nie zawsze zgodny z ogólnymi praktykami. Także pamiętaj, aby uzupełniać wiedzę, którą Ci przekazuje w moich artykułach. Jeśli będziesz miał z czymś problem to zachęcam do komentowania.

Handlebars template – jak używać w Node.js?