Мы остановились на последнем видео с небольшим беспорядком. Все в одном блоке JavaScript мы смешивали извлечение данных, отображение и бизнес-логику, а также шаблоны. В этом видео мы собираемся начать разбирать эти вещи, чтобы перейти к более организованному, удобному в сопровождении и понятному коду. Большая часть этого - создание шаблонов.
Возьмите первое место в нашем приключении по созданию шаблонов с Handlebars. У 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 Криса Койера (@chriscoyier) на CodePen
Мы сделали здесь несколько хороших шагов в направлении улучшения кода, но нам еще многое предстоит сделать, чтобы сделать его идеально чистым.