Како апликација расте у сложености, тако расту и њене потребе. У неком тренутку, послуживање статичних ХТМЛ датотека може ометати напредак или задржати функционалност апликације. Уместо тога, желећете да сервирате динамички садржај, задатак који омогућавају машине за шаблонирање као што је Хандлебарс.
Хандлебарс је минимална машина за шаблонирање без логике за НодеЈС. То је продужетак мотора шаблона за бркове. Пошто је то механизам без логике, можете га користити да стриктно одвојите презентацију од основног кода.
Хандлебарс има одличну подршку као механизам за шаблонирање из НестЈС оквира.
Шта је механизам за шаблонирање?
Машина за шаблонирање је алатка која комбинује ХТМЛ ознаке и програмски језик за креирање ХТМЛ шаблона са минималним кодом.
Механизам шаблона у време извођења убацује податке у ХТМЛ шаблон да би приказао коначни приказ у претраживачу.
Можда ће вам бити компликовано да подесите механизам за креирање шаблона као што је Хандлебарс, јер укључује много корака. Међутим, оквир Екпресс сервера који НестЈС подразумевано користи има одличну подршку за управљаче.
Корак 1: Генеришите НестЈС апликацију
Покрените следећу команду да бисте поставили нову Нест апликацију:
гнездо ново <назив ваше апликације>
Корак 2: Инсталирајте ручке за управљање
Покрените следећу команду да бисте инсталирали Хандлебарс користећи нпм менаџер пакета:
нпм инсталл екпресс-хандлебарс@^5.3.0@врсте/express-handlebars@^5.3.0
Корак 3: Конфигуришите експресну инстанцу
Дођите до вашег маин.тс датотеку и увоз НестЕкпрессАпплицатион из @нестјс/платформ-екпресс.
Додели НестЕкпрессАпплицатион као генерички тип за Креирај методом.
Овако:
конст апп = чекати НестФацтори.цреате(АппМодуле)
Прослеђивање НестЕкпрессАпплицатион у апликација објекат му даје приступ ексклузивним методама за ЕкпрессЈС. Те методе ће вам требати да бисте конфигурисали одређена својства управљача.
Корак 4: Конфигуришите ручке
Прво, мораћете да наведете локације на којима ће ваша апликација пронаћи ХТМЛ и друге статичке датотеке (таблице стилова, слике, итд.). Можете да складиштите своје ХТМЛ датотеке у „погледа” фолдер и друге статичке датотеке у „јавности” фолдер, респективно.
Да бисте одредили локације, почните са увозом придружити из пут. Затим, унутар боотстрап функцију, подесите локацију за стилове.
Овако:
апп.усеСтатицАссетс (придружи се (__дирнаме, '..', 'јавности'))
Функција спајања узима произвољан број низ аргументе, придружује их и нормализује резултујућу путању. __дирнаме враћа путању фасцикле у којој је маин.тс фајл борави.
Затим подесите локацију за своје ХТМЛ датотеке, на следећи начин:
апп.сетБасеВиевсДир (придружи се (__дирнаме, '..', 'погледа'));
Затим увезите управљаче у свој маин.тс фајл:
увоз * као хбс из 'екпресс-хандлебарс';
Требаће вам хбс импорт да бисте конфигурисали својства управљача као што је име екстензије итд.
Подразумевано име екстензије датотеке за Хандлебарс је .управљачи.
Ово име екстензије је дугачко, али можете га конфигурисати помоћу апп.енгине позив. апп.енгине је изворна функција омотача око експрес.мотор методом. Потребна су два аргумента: ект и функцију повратног позива. Видите Експресна документација на апп.енгине да бисте сазнали више о томе.
Цалл апп.енгине(), и као први аргумент проследите стринг 'хбс'. Затим, као други аргумент, позовите функцију хбс и проследите конфигурациони објекат са својством ектнаме подешен на 'хбс'. Ово подешавање мења назив екстензије из .хандлебарс у .хбс.
апп.енгине('хбс', хбс({ ектнаме: 'хбс' }));
Коначно, подесите механизам за преглед на Хандлебарс овако:
апп.сетВиевЕнгине('хбс');
Корак 5: Креирајте фасцикле
У основном директоријуму вашег пројекта направите две нове фасцикле. Користићете прву, јавности, за чување стилова за вашу апликацију. У погледа, чуваћете све своје ХТМЛ датотеке.
Овим се завршава подешавање вашег развојног окружења. У следећем одељку ћете имати преглед синтаксе Хандлебарс-а и њене употребе у НестЈС апликацији.
Синтакса управљача
Овај одељак ће покрити највећи део синтаксе управљача која вам је потребна за динамичко сервирање датотека.
помагачи
Помоћници су функције које трансформишу излаз, понављају податке и рендерују условни излаз.
Хандлебарс пружа две врсте помоћника (блокирани и уграђени) и можете креирати прилагођене помоћнике који одговарају вашим потребама.
Помоћника означавате тако што ћете га умотати у двоструке витичасте заграде. Додајте префикс његовом имену хешом (#) за почетну помоћну ознаку и косом цртом унапред (/) за завршну ознаку.
На пример:
{{!-- ако вредност је истинито, див ће бити приказан друго, неће --}}
{{#иф вредност}}
<див>Вредност је приказана</div>
{{/ако}}
Ако креирате прилагођеног помоћника, морате га регистровати у свом хбс конфигурациони објекат у вашем маин.тс датотеку пре него што је можете користити у својој апликацији.
// маин.тс
увоз { цустомХелпер } из './хелперс/хбс.хелперс';
// Унутар боотстрап функције
апп.енгине('хбс', хбс({ ектнаме: 'хбс', помоћници: { цустомХелпер } }));
Изрази
Изрази су јединица шаблона управљача. Ваша употреба израза варира у зависности од сложености задатка. Можете их користити саме у шаблону, прослиједити их као улаз у помоћнике и још много тога.
Означите изразе двоструким витичастим заградама, на пример:
<х1>{{порука}}</h1>
Делимичне
Делимичан се односи на део ХТМЛ-а који је унапред сачуван јер се појављује у неколико ХТМЛ датотека. На пример, навигационе траке и подножја. Тај садржај можете сачувати у једној датотеци и укључити га када је потребно.
Као и код ваших статичких и ХТМЛ датотека, такође ћете морати да подесите директоријум са делимичним садржајем у вашем апп.енгине конфигурациони објекат.
Региструјте свој директоријум парцијала додавањем следећег кода свом конфигурационом објекту:
// маин.тс
партиалсДир: придружи се (__дирнаме, '..', 'погледи/делимични'),
Можете приступити делимичном користећи синтаксу делимичног позива. У двоструким витичастим заградама унесите симбол веће од (>) након чега следи назив дела.
На пример:
{{> намеОфПартиал}}
Распореди
Распоред управљача је ХТМЛ страница која се користи за постављање основних мета-података или опште структуре за друге ХТМЛ странице у апликацији. Делује као контејнер са чуваром места у који можете да убаците динамичке податке.
На пример:
<!ДОЦТИПЕ хтмл>
<хтмл ланг="ен">
<глава>
<мета цхарсет="УТФ-8">
<мета хттп-екуив="Кс-УА-Цомпатибле" цонтент="ИЕ=ивица">
<мета наме="виевпорт" цонтент="видтх=девице-видтх, инитиал-сцале=1.0">
<наслов>Шаблон у НестЈС-у са ручкама</title>
</head>
<тело>
<заглавље>
{{!-- Навбар Делимично --}}
{{>навбар}}
</header>
<див>
{{!-- Боди Плацехолдер --}}
{{{боди}}}
</div>
{{!-- Делимично подножје --}}
{{>фоотер}}
</body>
</html>
Када покренете свој код, Хандлебарс преузима садржај .хбс датотеку коју желите да прикажете и убацује их у тело чувар места. Затим приказује резултат као коначну ХТМЛ страницу.
Мораћете да региструјете свој директоријум распореда у вашем апп.енгине конфигурациони објекат и поставите подразумевану датотеку изгледа. Подразумевана датотека изгледа је датотека распореда коју Хандлебарс користи ако не дефинишете одређени распоред.
Додајте следећи код свом конфигурационом објекту да бисте прогласили подразумевани изглед и регистровали директоријум распореда:
дефаултЛаиоут: 'Назив датотеке изгледа',
лаиоутсДир: придружи се (__дирнаме, '..', 'погледи/изгледи'),
Рендеровање .хбс датотеке
У датотеци контролера увезите Рес декоратер из @нестјс/цоммон и Одговор из изразити.
Затим у руковаоцу руте пренесите аргумент, рес. Доделите тип Респонсе рес и означите га помоћу Рес декоратора. Рес декоратор излаже експресове изворне методе руковања одговором и онемогућава стандардни приступ НестЈС.
Затим позовите метод рендерирања на рес и проследите име датотеке коју желите да прикажете као први аргумент. За други аргумент, проследите објекат који садржи име распореда и вредност замене за израз.
Управљачи ће користити подразумевани распоред постављен у вашем апп.енгине конфигурациони објекат ако не обезбедите изглед.
@Добити()
гетХелло(@Рес() рес: Одговор){
врати рес.рендер('Назив датотеке', { распоред: 'назив распореда', порука: 'Здраво Свете' });
}
Алтернативе управљачима
Хандлебарс је одличан алат за шаблоне са многим практичним функцијама као што су помоћници и распореди. Ипак, у зависности од ваших потреба, можете одабрати алтернативу као што је ЕЈС (уграђени ЈаваСцрипт), Пуг или Мустацхе.
