Ми зупинилися в останньому відео з трохи заплутаним безладом. Все в одному блоці JavaScript ми поєднували пошук даних, відображення та ділову логіку та шаблонування. У цьому відео ми почнемо розбивати ці речі, щоб перейти до більш організованого, ремонтопридатного та зрозумілого коду. Велику частину цього складають шаблони.
Візьміть №1 у нашій шаблонній пригоді з кермом. Handlebars має розумний підхід у тому, що HTML для шаблону буквально поміщений у HTML. Ви використовуєте спеціальний тег. Це робить приємне створення, оскільки ми можемо уникнути незграбності об’єднання рядків (усі ці лапки та плюси) і отримати приємне підсвічування синтаксису для HTML, який надає ваш редактор. Наш шаблон зрештою виглядав так:
((movieTitle))
((movieDirector))
Зверніть увагу на дивний typeатрибут на тезі сценарію. Це перешкоджає виконанню вмісту цього тегу. Зрештою Handlebars просто витягує нутрощі цього тегу і перетворює його на функцію шаблону. Досить розумний спосіб по-справжньому впоратися з цим.
Такі шматочки, як ((movieTitle))важливі частини. Зрештою, ми передаємо об’єкт функції створення шаблонів, і властивості цього об’єкта відповідають цим бітам-заповнювачам. Кермо називається кермом, мабуть, тому, що ті біти-заповнювачі обмотані фігурними дужками, які трохи схожі на кермо зверху.
Слідуючи простому посібнику на веб-сайті Handlebars, ми створюємо нашу функцію шаблонування наступним чином:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Потім у нашому forциклі ми викликаємо нашу нову функцію шаблонування з об’єктом (контекстом), що містить один фільм. HTML буде повернено, і ми додаємо його на сторінку.
var html = template(data.movies(i)); $("#movies").append(html);Ми також беремо шаблон у цьому відео та знімаємо його на інше перо. Це лише означає, що ви, швидше за все, зможете розбити власний код у реальному проекті. Шаблон майже напевно буде якимось «включенням».
Ось де ми опинились:
Дивіться Pen mdCjJ від Chris Coyier (@chriscoyier) на CodePen
Тут ми зробили кілька хороших кроків до кращого коду, але нам потрібно ще багато, щоб отримати його ідеально чистим.