Спряхме в последното видео с малко заплетена бъркотия. Всичко в един блок на 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
Постигнахме няколко добри стъпки тук към по-добър код, но имаме още какво да направим, за да го направим идеално чист.