Nowości

Kompendium wiedzy o Handlebars.js

Web Development przeszedł bardzo długą i wyboistą drogę, by dotrzeć do miejsca i stanu, w jakim znamy go dzisiaj. Droga ta zrodziła wiele owoców…

Web Development przeszedł bardzo długą i wyboistą drogę, by dotrzeć do miejsca i stanu, w jakim znamy go dzisiaj. Droga ta zrodziła wiele owoców w postaci wspaniałych technologii i rozwiniętych języków programowania, a także powstających standardów, które pozwoliły ujednolicić różniące się od siebie implementacje. Nie byłoby jednak tego wszystkiego gdyby nie ciągły zapał i chęć osób zaangażowanych w owe technologie, by tworzyć nowe możliwości i ułatwiać sobie oraz innym życie. Wraz z rozwojem technologii webowych (i nie tylko), aspekt łatwego utrzymania kodu zyskiwał na znaczeniu. Tak powstał m. in. język CSS (Cascading Style Sheets), który oprócz dodania niezliczonej liczby możliwości, pozwolił odseparować warstwę prezentacyjną witryny od jej struktury. Podobnie było z innymi językami, w których dobre praktyki programistyczne nakazywały tworzyć skrypty w sposób nieinwazyjny, czyli taki, który oddzielał logikę aplikacji od jej wyglądu i struktury.

Mówiąc „…z innymi językami„, mam na myśli głównie język JavaScript, który stał się podstawą nowoczesnej sieci www i w tym poradniku właśnie na owym języku się skupimy. Rozwój JavaScriptu przyniósł ze sobą technologię, którą dzisiaj wykorzystuje niemal każda nowa witryna; technologia ta to AJAX, umożliwiający wysyłanie żądań i odbieranie danych z serwera bez konieczności przeładowywania strony. Często zatem stajemy w sytuacji, gdy odebrane z serwera dane trzeba z odpowiedni sposób sformatować i wyświetlić po stronie klienta. Tutaj właśnie pojawia się pytanie, jaki jest najlepszy sposób by zrobić to łatwo i szybko, a przy tym utrzymać maksymalną czytelność kodu? Moja odpowiedź na to pytanie brzmi – Handlebars.js.

Zanim przejdę dalej, w tym miejscu chciałbym zaznaczyć, że artykuł, który masz przed sobą jest pierwszą częścią dwuczęściowego poradnika na temat Handlebars.js, w której omówię zarówno podstawy jak i bardziej zaawansowane aspekty, natomiast w części drugiej wykorzystamy zdobytą widzę do stworzenia aplikacji pobierającej i wyświetlającej tweety z dowolnego profilu Twittera.

Czym jest Handlebars.js?

Handlebars.js to niewielka biblioteka napisana w JavaScripcie, która powstała na bazie szablonów Mustache, dostępnych w wielu innych językach programowania. Ideą Handlebars jest wspomniana wyżej separacja struktury szablonu od treści jaka się w nim pojawi. Jeśli nie jest Ci obce programowanie w PHP, znasz zapewne technologię Smarty. Handlebars.js w użyciu wygląda nieco podobnie, o czym przekonasz się już niebawem. Praca z tą biblioteką przebiega mniej więcej w taki sposób:

  • 1. Tworzymy szablon HTML i uzupełniamy go znacznikami Handlebars,
  • 2. Przekazujemy stworzony szablon do funkcji kompilującej Handlebars.compile() i jej wynik zapisujemy w zmiennej,
  • 3. Zmienna ta jest od tej pory funkcją, do której przekazujemy obiekt z danymi, otrzymując w ten sposób wynikowy kod HTML do wyświetlenia.

Handlebars.js

Zaczynamy!

Na początek potrzebny nam będzie prosty plik HTML, w którym zaimportujemy bibliotekę Handlebars.js (którą możesz pobrać tutaj), nasz pusty na razie skrypt (scripts.js), a także stworzymy div#output, do którego wstawiany będzie gotowy kod HTML wygenerowany przez nasz skrypt. W tym momencie wygląda to następująco:




	
	Test Handlebars



	

Kolejnym krokiem będzie stworzenie szablonu, który zostanie skompilowany, a następnie uzupełniony danymi i wyświetlony na stronie. Sposobów na to jest kilka, a najprostszym byłoby stworzenie ciągu znaków w ten sposób:

var zrodlo = "

{{imie}} {{nazwisko}}

"

Twórcy Handlebars.js zalecają jednak inną, bardziej czytelną metodę, czyli umieszczenie szablonu w tagu script z odpowiednim atrybutem type. Kod taki nie zostanie przez przeglądarkę wyświetlony na stronie, lecz w łatwy sposób będzie mógł być przekazany do dalszej obróbki.
Po uzupełnieniu strony wygląda to następująco:




	
	Test Handlebars

  

Widzimy zatem element script z atrybutem type równym text/x-handlebars-template oraz identyfikatorem, dzięki któremu pobierzemy jego zawartość. Czas by wyjaśnić coś, co już zapewne zauważyłeś, czyli imie oraz nazwisko ujęte w dwóch parach nawiasów klamrowych. Tak właśnie wygląda podstawowy zapis wykorzystywany w Handlebars.js, dzięki któremu w jego miejsce wstawiony zostanie odpowiedni fragment danych.

Cała magia odbywa się na zapleczu w skrypcie scripts.js, który w tym momencie wygląda tak:

// Pobieramy HTML z szablonem
var zrodlo = document.getElementById("tpl").innerHTML;

// Kompilujemy szablon
var szablon = Handlebars.compile(zrodlo);

// Obiekt z danymi do szablonu
var dane = {
		imie: "Marek",
		nazwisko: "Kowalski"
	}

// Wygenerowanie gotowego kodu z szablonu
var html = szablon(dane);

// Wstawienie kodu na stronę
document.getElementById("output").innerHTML = html;

Jak zatem widzisz, najpierw pobieramy kod HTML naszego szablonu uzupełniony znacznikami Handlebars, a następnie przekazujemy go do funkcji Handlebars.compile(), która do naszej zmiennej przypisze wywołanie odpowiedniej funkcji. W kolejnym kroku do zwróconej funkcji podajemy obiekt z danymi (w naszym przypadku obiekt dane) i dzięki temu w zmiennej html przechowujemy już gotowy kod wynikowy, który w ostatniej linijce wstawiany jest do diva #output i prezentuje się następująco:

Marek Kowalski

Warto zauważyć tutaj, że nazwy podawane w szablonie w nawiasach klamrowych muszą być zgodne z nazwami właściwości w obiekcie dane.

Po co to wszystko?
Aby zobrazować Ci, dlaczego użycie Handlebars.js (lub innego systemu do templatingu) jest dobrym rozwiązaniem, przedstawię wynik pokazany powyżej za pomocą czystego JavaScriptu:

var html = "

" + dane.imie + " " + dane.nazwisko + "

";

Wiem, wiem, na pierwszy rzut oka wydaję się, że zapis ten jest o wiele krótszy. Jednak co z czytelnością? Masa plusów i cudzysłowów by połączyć informacje z elementami HTML w ciąg znaków. A jak sam widziałeś, to był naprawdę nieskomplikowany przykład, zaledwie wyświetlenie imienia i nazwiska. Jak zobaczysz w dalszej części tego artykułu, przykłady mogą być dużo bardziej skomplikowane i użycie konkatenacji znaków w czystym JS mogłoby przysporzyć nie lada problemów. Rozwiewając inne wątpliwości dodam, że opisywana biblioteka jest bardzo szybka i niewiele zajmuje, dlatego żadne argumenty o przewadze standardowego kodu nie powinny być tutaj brane pod uwagę.

Skoro znasz już podstawową ideę działania Handlebars.js, przejdźmy do bardziej zaawansowanych aspektów.

Wbudowane instrukcje

Handlebars.js posiada szereg wbudowanych instrukcji, które pozwalają nam w łatwy sposób tworzyć zaawansowane szablony HTML. Wśród wspomnianych podstawowych poleceń znajdziemy with, each, if i unless. Zacznę od pierwszej i w kolejności przedstawię wszystkie pozostałe.

with
Wyobraź sobie, że pobieramy obiekt z dużą ilością danych, zagnieżdżonych wewnątrz siebie i chcemy je poprawnie wyświetlić. Dane takie mogłyby się prezentować w następujący sposób:

var dane {
	imie: "Marek",
	nazwisko: "Kowalski",
	wiek: 34,
	szkoly: {
		podstawowa: "Szkoła Podstawowa nr 1 w Nibylandii",
		srednia: "Technikum Budowlane w Ogrodnikach",
		wyzsza: "Akademia Budownictwa w Sośnikowie"
	}
}

Załóżmy, że chcemy wyświetlić je wszystkie (choć nie zawsze tak będzie) odpowiednio sformatowane. O ile z trzema pierwszymi właściwościami nie będzie problemu i użyjemy do ich prezentacji znanego już sposobu, to z danymi z rubryki szkoly będziemy musieli się jakoś uporać. I tutaj z pomocą przychodzi nam wbudowana instrukcja with, która pomoże nam ten cel osiągnąć. Szablon (w tagu script) przedstawia się tak:

Imię i nazwisko: {{imie}} {{nazwisko}}

Wiek: {{wiek}}

Szkoły:

    {{#with szkoly}}
  • Podstawowa: {{podstawowa}}
  • Średnia: {{srednia}}
  • Wyższa: {{wyzsza}}
  • {{/with}}

Dzięki takiemu szablonowi otrzymany kod będzie wyglądał następująco:

Imię i nazwisko: Marek Kowalski

Wiek: 34

Szkoły:

  • Podstawowa: Szkoła Podstawowa nr 1 w Nibylandii
  • Średnia: Technikum Budowlane w Ogrodnikach
  • Wyższa: Akademia Budownictwa w Sośnikowie

Podobny efekt moglibyśmy uzyskać bez użycia instrukcji with, za pomocą operatora kropki, w ten sposób:

  • Podstawowa: {{szkoly.podstawowa}}
  • Średnia: {{szkoly.srednia}}
  • Wyższa: {{szkoly.wyzsza}}

jednak osobiście uważam, że kod z użyciem with jest bardziej czytelny i prostszy do zrozumienia. Widzisz zatem, że instrukcje rozpoczynają się znakiem #, po którym występuje nazwa polecenia i kolejno po spacji argument przekazywany do tejże funkcji (w tym przypadku właściwość szkoly). Całość zakończona jest natomiast ukośnikiem i ponownie nazwą instrukcji.

each
Kolejną bardzo przydatną instrukcją jest each, czyli prosta pętla wykonująca kawałek szablonu dla każdego z elementów tablicy. Przyjrzyjmy się przykładowi obiektu z danymi:

var dane {
	pracownicy: [
		{
			imie: "Marek",
			nazwisko: "Kowalski",
			wiek: 34
		},
		{
			imie: "Tomasz",
			nazwisko: "Nowak",
			wiek: 30
		},
		{
			imie: "Joanna",
			nazwisko: "Nowicka",
			wiek: 27
		}
	]
}

a następnie kodowi szablonu (przypominam, szablon w tagu script):

{{#each pracownicy}}
	

Imię i nazwisko: {{imie}} {{nazwisko}}

Wiek: {{wiek}}


{{/each}}

Wynik, jak nie trudno przewidzieć, jest taki:

Imię i nazwisko: Marek Kowalski

Wiek: 34


Imię i nazwisko: Tomasz Nowak

Wiek: 30


Imię i nazwisko: Joanna Nowicka

Wiek: 27


if
Zdarzają się również sytuacje, gdzie wyświetlenie pewnych informacji uzależnione jest od spełnienia jakiegoś warunku. W takim przypadku z pomocą przychodzi znana instrukcja if. Standardowo już obiekt z danymi:

var dane {
	pracownicy: [
		{
			imie: "Marek",
			nazwisko: "Kowalski",
			wiek: 34,
			urlop: 0
		},
		{
			imie: "Tomasz",
			nazwisko: "Nowak",
			wiek: 30,
			urlop: 12
		},
		{
			imie: "Joanna",
			nazwisko: "Nowicka",
			wiek: 27,
			urlop: 24
		}
	]
}

W stworzonym szablonie wykorzystującym pętlę each dodamy warunek, który sprawdzi ilość niewykorzystanych dni urlopu i wypisze je na ekranie, jeśli natomiast ilość ta równa będzie 0, wyświetli komunikat o braku wolnych dni na odpoczynek.

{{#each pracownicy}}
	

Imię i nazwisko: {{imie}} {{nazwisko}}

Wiek: {{wiek}}

{{#if urlop}} Ilość dni urlopu do wykorzystania: {{urlop}} {{else}} Urlop został wykorzystany! {{/if}}


{{/each}}

Wynikowy kod HTML wygląda tak:

Imię i nazwisko: Marek Kowalski

Wiek: 34

Urlop został wykorzystany!


Imię i nazwisko: Tomasz Nowak

Wiek: 30

Ilość dni urlopu do wykorzystania: 12


Imię i nazwisko: Joanna Nowicka

Wiek: 27

Ilość dni urlopu do wykorzystania: 24


unless
Ostatnią z podstawowych instrukcji jest unless, czyli odwrotność if. Działa ona następująco:

var dane {
	imie: "Marek",
	nazwisko: "Kowalski",
	telefon: {
		numer: "600 600 600",
		zastrzezony: false
	}
}

oraz szablon:

Imię i nazwisko: {{imie}} {{nazwisko}}

{{#unless telefon.zastrzezony}}

Numer telefonu: {{telefon.numer}}

{{/unless}}

W tym przypadku zobaczymy zarówno imię i nazwisko jak i numer telefonu, jeśli jednak zmienimy zastrzezony na wartość true – informacje o telefonie nie pojawią się. Zamiast słowa kluczowego unless, możemy użyć następującej notacji:

{{^telefon.zastrzezony}}

Numer telefonu: {{telefon.numer}}

{{/telefon.zastrzezony}}

czyli po prostu użyć znaku daszka ^. Efekt działania jest dokładnie ten sam, jednak w przypadku użycia daszka zero nie będzie traktowane jako fałsz.
Dla formalności kod w pierwszym przypadku:

Imię i nazwisko: Marek Kowalski

Numer telefonu: 600 600 600

Ścieżki oraz „ucieczka”

Jak już wyżej zauważyłeś, dostęp do poszczególnych danych obiektu jest możliwy z poziomu kilku sposobów. Jednym z nich jest instrukcja with, wewnątrz której po prostu podajemy nazwy zagnieżdżonych właściwości. Ominąć instrukcję with możemy stosując operator kropki np. {{szkoly.podstawowa}}. Kolejnym sposobem osiągnięcia tego efektu bez użycia with jest podanie po prostu nazwy rubryki jako instrukcji, w taki sposób:

{{#szkoly}}

{{podstawowa}}

{{/szkoly}}

Ścieżka powrotu
Nasz skrypt znajduje się czasem w sytuacji, gdzie sięga po dane w zagnieżdżonej właściwości, lecz jednocześnie potrzebuje wyświetlić inną informację, która jest o jeden poziom wyżej. Tutaj z pomocą przychodzi nam króciutki zapis ../ znany np. z CSS. Wyobraźmy sobie następujące dane:

var dane {
	autor: "admin",
	tresc: {
		tytul: "Przykładowy tytuł",
		data: "20/07/2012",
		komentarzy: 12,
		wpis: "Treść wpisu na blogu"
	}
}

W szablonie chcemy wypisać datę, ilość komentarzy, a następnie treść zakończoną dopiskiem „napisane przez:„. Oto szablon:

{{#with tresc}}

{{tytul}}

Opublikowany: {{data}}

Komentarzy: {{komentarzy}}

{{wpis}}, napisane przez: {{../autor}}.

{{/with}}

Jak widać, będąc wewnątrz instrukcji with, czyli w rubryce tresc, byliśmy w stanie sięgnąć jeden poziom wyżej i pobrać informacje o autorze wpisu dzięki ../:

Przykładowy tytuł

Opublikowany: 20/07/2012

Komentarzy: 12

Treść wpisu na blogu, napisane przez: admin.

Ucieczka od znaków HTML
Zdarzają się również sytuacje, w których pobrany obiekt z danymi zawiera w treści tagi HTML. Normalne wstawienie takiej treści na stronę z użyciem {{tresc}} spowoduje zamianę tych znaków na tzw. encje, w rezultacie czego nie otrzymamy kodu HTML lecz czysty tekst. Np.

var dane {
	tresc: "

Przykładowa treść

" }

Aby treść została wyświetlona z uwzględnieniem zawartego w niej kodu HTML musimy posłużyć się potrójną parą nawiasów klamrowych, zamiast jak do tej pory podwójną:

{{{tresc}}}

i w ten sposób kod zostanie poprawnie zinterpretowany przez przeglądarkę.

Tworzenie własnych instrukcji z Handlebars.registerHelper()

Choć zestaw wbudowanych instrukcji biblioteki Handlebars.js jest dość pokaźny, często przychodzi potrzeba użycia czegoś mniej standardowego. Na szczęście i z tym problemem nie pozostajemy sami, dzięki funkcji Handlebars.registerHelper(), która pozwala nam stworzyć własną instrukcję, a następnie użyć jej w naszym szablonie.

Funkcja ta jako pierwszy parametr przyjmuję nazwę tworzonej przez nas instrukcji, a jako drugi funkcję, która zostanie wykonana. Stwórzmy zatem prostą instrukcję, która zmieni wielkość liter w wyświetlanej informacji na wielkie.

Handlebars.registerHelper("wielkie", function(dane) {
	return dane.toUpperCase();
});

Jak widzisz, wewnętrzna funkcja przyjmuje parametr, na którym można wykonywać różne operacje, a następnie go zwrócić. W tym przypadku użyłem wbudowanej metody JavaScriptu o nazwie .toUpperCase(), która zmienia wielkość liter na duże (odwrotnością jest metoda .toLowerCase() obiektu String);
Teraz musimy już tylko wywołać naszą instrukcję w szablonie i przekazać jej parametr. Zatem niech nasz obiekt z danymi będzie następujący:

var dane {
	tresc: "Przykładowa treść"
}

a szablon taki:

{{wielkie tresc}}

W tym przypadku wielkie to nazwa naszej instrukcji, a tresc to parametr przekazany do funkcji. Wynik, jak nie trudno się domyślić wygląda tak:

PRZYKŁADOWA TREŚĆ

Instrukcje blokowe
Oprócz prostych instrukcji, jak ta pokazana wyżej, możemy tworzyć również instrukcje blokowe, które rozpoczynamy i zakańczamy (jak np. if). Tworzymy je również przy pomocy Handlebars.registerHelper(). Załóżmy, że chcemy stworzyć funkcję, która wypisze wszystkie elementy tablicy w formie nieuporządkowanej listy ul, a do tego da nam możliwość zdefiniowania klasy dla tejże listy.

Zaczniemy w ten sposób:

// Obiekt z danymi
var dane {
	osoby: [
		{
			imie: "Marek",
			nazwisko: "Kowalski"
		},
		{
			imie: "Tomasz",
			nazwisko: "Nowak"
		},
		{
			imie: "Joanna",
			nazwisko: "Nowicka"
		}
	]
}

Handlebars.registerHelper("lista", function(dane, opcje) {

	var output = "
    "; // kod pętli return output; });

W tym momencie stworzyliśmy blok o nazwie lista, wewnątrz którego utworzona została lista ul z klasą podaną przez nas w szablonie w ten sposób:

{{#lista osoby class="mojaKlasa"}}
{{imie}} {{nazwisko}}
{{/lista}}

Widzisz zatem, że dostęp do atrybutów jest możliwy za pomocą notacji opcje.hash["nazwaAtrybutu"] i tak w naszym przypadku lista ul otrzyma klasę mojaKlasa. Wewnątrz bloku #lista podaliśmy imię i nazwisko, które wykorzystamy za chwilę. Wróćmy jednak do naszego handlera:

Handlebars.registerHelper("lista", function(dane, opcje) {

	var output = "
    "; for(var i = 0; i < dane.length; i++) { output += "
  • " + opcje.fn(dane[i]) + "
  • "; } output += "
"; return output; });

Ten przykład jest z pewnością najtrudniejszy, dlatego wytłumaczę go powoli. Spójrz na funkcję, która przyjmuje parametry dane i opcje. Parametr dane (jak możesz zauważyć wyżej w szablonie) to osoby z obiektu dane. Jest to tablica, na której wykonujemy pętlę for. Na początku stworzyliśmy ul.mojaKlasa, a w pętli za pomocą operatora += dodajemy do zmiennej output elementy listy li. Kluczowe jest tutaj zrozumienie mechanizmu opcje.fn(dane[i]), który generuje kod zawarty pomiędzy znacznikami li. Zaczniemy od środka, zatem dane[i] to będzie jeden z obiektów wewnątrz osoby w naszym obiekcie dane. opcje.fn natomiast to wywołanie naszego szablonu, które zwróci gotowy kod. Spójrz teraz na nasz szablon, w którym umieściłem {{imie}} {{nazwisko}}. Do tego kodu potrzebujemy zatem danych, które wypełnią podane znaczniki i właśnie te dane przekazujemy funkcji opcje.fn poprzez podanie dane[i].

Kod, który zwróci nam opcje.fn(dane[i]) to będzie kolejno: „Marek Kowalski” (przy pierwszej iteracji pętli), „Tomasz Nowak” (przy drugiej) oraz „Joanna Nowicka” (przy trzeciej). Aby dokładnie zrozumieć działanie tego kodu niezbędne jest poeksperymentowanie we własnym zakresie, do czego gorąco Cię zachęcam.

Dzięki stworzonemu blokowi otrzymaliśmy kod HTML:

  • Marek Kowalski
  • Tomasz Nowak
  • Joanna Nowicka

Użycie kodu ponownie z Handlebars.registerPartial()

Przy tworzeniu szablonów spotkamy się czasem z sytuacją, w której dobrym pomysłem będzie ponowne użycie raz stworzonego szablonu w innym szablonie. Dzięki Handlebars.registerPartial() możemy zarejestrować jakiś szablon w formie podobnej do instrukcji, a następnie wywołać go w innym miejscu. Spójrzmy na przykład obiektu z danymi:

var dane {
	informacje: "Informacje o firmie",
	adres: "ul. Kwiatowa 43, 37-599 Świnki",
	telefon: "899 000 000",
	pracownicy: {
		[
			{
				imie: "Marek",
				nazwisko: "Kowalski"
			},
			{
				imie: "Tomasz",
				nazwisko: "Nowak"
			},
			{
				imie: "Joanna",
				nazwisko: "Nowicka"
			}
		]
	}
}

W naszym przypadku będziemy mieli 2 szablony stworzone w dwóch oddzielnych elementach script. Pierwszy z nich będzie następujący:

a zatem będzie wyświetlał podstawowe informacje o firmie, natomiast drugi wyświetli listę pracowników firmy:

Zauważ, że szablon drugi otrzymał inny identyfikator, do którego za moment się odwołamy. Naszym celem jest wywołanie szablonu drugiego wewnątrz szablonu pierwszego. Aby to zrobić musimy najpierw zarejestrować w kodzie JS naszą część, a następnie dodać wywołanie w odpowiednim miejscu. Zatem posłużmy się funkcją:

Handlebars.registerPartial("listaPracownikow", document.getElementById("tpl2").innerHTML);

której jako pierwszy parametr podaliśmy nazwę, a jako drugi kod HTML szablonu drugiego. Teraz już wystarczy tylko dodać wywołanie tego kodu w szablonie numer 1:

poprzez dopisek {{> listaPracownikow}}

Funkcje pomocnicze

Ostatnią rzeczą jaką opiszę w tym poradniku są funkcje pomocnicze Handlebars, które przydają się od czasu do czasu. Wszystkie z trzech wymienionych funkcji mają zastosowanie przy tworzeniu własnych z użyciem Handlebars.registerHelper().

Handlebars.Utils.escapeExpression()
Funkcja ta przydaje się, kiedy wiemy lub przypuszczamy, że pewien ciąg znaków może zawierać kod HTML, którego nie chcemy wyświetlać w przeglądarce. Możemy zatem podać jako argument tej funkcji pobrany ciąg znaków, a zwróci ona ciąg zawierający encje zamiast tagów HTML. Spójrz na przykład:

var tekst = 

Treść

; return Handlebars.Utils.escapeExpression(tekst); // otrzymamy "<p>Treść</p>"

Handlebars.SafeString()
Tej funkcji będziemy używać zazwyczaj w połączeniu z poprzednią, jednak nie jest to wymogiem. Funkcja ta zwróci tzw. bezpieczny ciąg znaków, dzięki czemu Handlebars nie będzie próbowało zamieniać kodu HTML na encje. Przykład jest następujący:

var tekst = "

Treść

"; return new Handlebars.SafeString(tekst);

W tym przypadku po wywołaniu np. {{tresc}} w szablonie, otrzymamy paragraf z treścią, a nie czysty tekst. Nie musimy w takim przypadku używać potrójnej pary nawiasów klamrowych.

Handlebars.Utils.isEmpty()
Ta funkcja z kolei, jak wskazuje jej nazwa, służy do sprawdzenia czy podany parametr jest pusty. Jeśli zwróci false, oznacza to, że ciąg znaków nie jest pusty, true w przeciwnym wypadku.

Podsumowanie

Gratuluję, jeśli dobrnąłeś do końca tego artykułu i w całości go przeczytałeś. W kwestii zrozumienia działania Handlebars.js pozostaje Ci już tylko jedno – zabawa z kodem. Nic tak nie uczy jak nauka na własnych błędach, dlatego zachęcam Cię byś przerobił sam opisane przeze mnie przykłady i przyswoił sobie tę cenną technikę. Nic nie zastąpi w 100% pracy z edytorem kodu i tworzeniem własnych snippetów czy komentarzy, jednak świetnym rozwiązaniem do testowania szablonów Handlebars jest strona TryHandlebarsJS, która zdecydowanie przyspieszy Twoją naukę.

Jak wspomniałem na początku, ten poradnik jest pierwszą częścią dwuelementowej serii o Handlebars.js, zatem bądź czujny, gdyż już wkrótce pojawi się część druga, w której za pomocą jQuery i Ajaxa pobierzemy wybrane Tweety i wyświetlimy je na stronie z pomocą Handlebars.

Tymczasem zapraszam do wyrażania własnych opinii i zadawania pytań w komentarzach!

UDOSTĘPNIJ ARTYKUŁ:

Powiązane artykuły

Nowości

[PREMIERA] Kurs React od Podstaw już na eduweb.pl!

Programowanie i WWW

eduweb na ngPoland!

Webdevelopment

eduweb.pl partnerem ConFront JS 2018!

Pozostań na bieżąco!

Już nigdy nie przegapisz ważnych informacji, promocji oraz nowych kursów. Zapisz się na newsletter już teraz!

Zapisując się do newslettera akceptujesz naszą politykę prywatności