Zrozumieć Handlebars.js

Nie jest łatwo. :( Szczerze mówiąc, to mam ochotę szpetnie zakląć. Ale potrzebuję jakiejś biblioteki do zbudowania szablonów HTML w mojej aplikacji. Więc - spróbujmy przełamać te lody. ;)

Docelowo za pomocą Handlebars.js chcę odpowiednio sformatować ("ubrać") i wyświetlać po stronie klienta dane pobierane z API. Brzmi jak daleka droga. Dlatego na początek, w ramach rozgrzewki, robię zaślepki poszczególnych stron apki.

💡 Odkrycie dnia 💡 (można się śmiać, tak jest banalne):
poniższy zapis (z dokumentacji Handlebars.js):

var source   = $("#entry-template").html();

odpowiada temu, ujętemu w cudzysłów:

  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>

Mówiąc jeszcze prościej: zmienna source to string, który zawiera szablon (kawałek HTMLa) wraz z surowymi zmiennymi w podwójnych nawiasach klamrowych, {{ }}.

U mnie wygląda to tak (podgląd z konsoli developerskiej, celowo zaznaczam cudzysłów na żółto, bo to właśnie tutaj dokonało się odkrycie dnia):

Idąc dalej:

var template = Handlebars.compile(source);

zmienna template to funkcja przyjmująca jeden parametr, który jest (a dokładniej: musi być) obiektem z dowolnymi atrybutami (co do zasady).
💡Na tym etapie następuje stworzenie Handlebars'owego szablonu.💡

W przykładzie z dokumentacji szablon ma 2 zmienne: {{title}} i {{body}}, więc i obiekt też ma 2 atrybuty:

var context = {title: "My New Post", body: "This is my first post!"};

Mój szablon ma tylko jedną zmienną {{title}}, więc i obiekt ma jeden atrybut:

var context = {title: "Here will be a list of books that I want to
              have."};

Wywołanie tego szablonu, czyli:

var html    = template(context);

zwraca - znów - string, będący kawałkiem HTMLa, ale już z danymi podstawionymi w miejsce zmiennych. W przykładzie z dokumentacji jest to:

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>

W moim przykładzie:

Tak zmontowany HTML wstrzykuję w stronę - z użyciem jQuery:

W efekcie - po wybraniu z menu "Wish list" pojawia się tekst: Here will be a list of books that I want to have.

Tylko tyle. I aż tyle.

Z dzisiejszych zmagań jeszcze do zapamiętania, że 💡wszystkie event handlery muszą być rejestrowane wewnątrz funkcji (po evencie) $(document).ready💡.

Amen.