У прошлом видео снимку обрадили смо шаблон са управљачима. Али управљачи нису једино решење за шаблонирање у блоку. У овом видео запису користићемо шаблон доступан у Ундерсцоре.
Зашто? Па, један од разлога је тај што можда већ користите Ундерсцоре на свом пројекту. То је изузетно популарна библиотека јер, попут јКуери, нуди гомилу корисних метода које раде у различитим прегледачима. Како кажу:
То је кравата заједно са јКуери-јевим смокингом и трегерима Бацкбоне.јс-а.
Ако већ користите Ундерсцоре, то би био велики подстицај за употребу његовог шаблона.
Такође у мом брзом тестирању, Хандлебарс 1.0.0 је гзиповано и умањено 14,2 КБ, а подвлачење 4,9 КБ гзиповано и умањено. Волан једноставно има више функција (нпр. Коментарисање, петље, путање, логика итд.). У нашем једноставном демонстрацијском програму нам ионако нису потребне те функције, тако да није баш поштено поређење, али добро, тек учимо.
Уместо да имамо шаблон у ХТМЛ-у, у ЈаваСцрипт-у морамо да дефинишемо подвлаке. Вратили смо се на неко спајање низова.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledзатим се претвара у функцију коју можемо позвати помоћу контекста нашег објекта података и враћа ХТМЛ сав попуњен тим подацима. Да бисмо били ефикасни, повезаћемо ХТМЛ који се враћа у један велики низ како бисмо га могли додати у ДОМ само једном:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);У овом видеу апстраховали смо и добијање података. Направили смо ЈСОН извор и користили јКуери-јеву функцију $ .гетЈСОН () да бисмо је добили. Као што бисмо вероватно морали да радимо у „стварном животу“.
$.getJSON("/path/to/json.js", function(data) ( ));Наша петља фор и таква која се ослања на те податке иде тамо у повратни позив. Или што је вероватније, позива неку другу добро именовану функцију да то реши, одржавајући ствари чисто одвојеним.
Ево где смо завршили:
Погледајте Пен ИпАдн Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у
Треба напоменути да је ЛоДасх 100% компатибилан са оним што смо овде урадили. Нисам сасвим сигуран да ли је ЛоДасх предложак нешто бољи / бржи / спорији / лошији од Ундерсцоре-а, али заменио сам библиотеке и демо је радио сасвим у реду.