W ostatnim filmie zakończyliśmy trochę poplątanego bałaganu. W jednym bloku JavaScript mieszaliśmy pobieranie danych, wyświetlanie i logikę biznesową oraz tworzenie szablonów. W tym filmie zaczniemy rozwiązywać te problemy, aby przejść do bardziej zorganizowanego, łatwiejszego w utrzymaniu i zrozumiałego kodu. Duża część tego dotyczy szablonów.
Wybierz nr 1 na naszą przygodę z szablonami, jaką jest kierownica. Handlebars ma sprytne podejście, polegające na tym, że kod HTML szablonu jest dosłownie umieszczany w kodzie HTML. Używasz specjalnego tagu. To sprawia, że tworzenie treści jest przyjemne, ponieważ możemy uciec od niezręczności związanej z konkatenacją ciągów (wszystkie te cudzysłowy i plusy) i uzyskać ładne podświetlanie składni HTML, które zapewnia twój edytor. Nasz szablon ostatecznie wyglądał następująco:
((movieTitle))
((movieDirector))
Zwróć uwagę na dziwny typeatrybut w tagu script. Zapobiega to wykonaniu zawartości tego tagu. Ostatecznie Handlebars po prostu wyciąga wnętrzności z tego tagu i zamienia go w funkcję szablonu. Całkiem sprytny sposób, żeby sobie z tym poradzić.
Te bity ((movieTitle))są ważnymi częściami. Ostatecznie przekazujemy obiekt do tworzonej funkcji szablonowej, a właściwości tego obiektu pasują do tych bitów zastępczych. Kierownica nazywa się prawdopodobnie kierownicą, ponieważ te zastępcze końcówki są owinięte zakręconymi szelkami, które wyglądają trochę jak kierownica z góry.
Postępując zgodnie z prostym samouczkiem na stronie internetowej Handlebars, tworzymy naszą funkcję szablonów w następujący sposób:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Następnie w naszej forpętli wywołujemy naszą nową funkcję tworzenia szablonów z obiektem (kontekstem), który zawiera pojedynczy film. Kod HTML zostanie zwrócony i dołączymy go do strony.
var html = template(data.movies(i)); $("#movies").append(html);Bierzemy również szablon z tego filmu i nagrywamy go do innego pióra. To po prostu oznacza, jak prawdopodobnie rozbiłbyś swój własny kod w prawdziwym projekcie. Szablon prawie na pewno byłby pewnego rodzaju „dołączeniem”.
Oto, gdzie skończyliśmy:
Zobacz Pen mdCjJ autorstwa Chrisa Coyiera (@chriscoyier) na CodePen
Zrobiliśmy tutaj dobre kroki w kierunku lepszego kodu, ale musimy zrobić więcej, aby był idealnie czysty.