Предлошци су важан део рада са ЈаваСцрипт апликацијама. Прилично је уобичајено да су вам подаци доступни, али не у формату који је спреман за приказ на екрану. То су уобичајени (али не увек) подаци у ЈСОН формату. То је одличан формат за рад у ЈаваСцрипт-у, али још увек морамо да га форматирамо у нешто што можемо да користимо.
На пример, ево неких измишљених података које бисмо могли имати при руци:
var data = ( movies: ( ( movieTitle: "Ender's Game", movieDirector: "Gavin Hood", movieImage: "http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/movie-endersgame.jpg.webp" ),… ) )И на крају бисмо желели да то претворимо у:
Ender's Game
Gavin Hood
Можда мислите да је јКуери сјајан у томе. јКуери је пун ДОМ алата за прелажење / манипулацију. Али нема врло робустан сет алата за креирање ДОМ-а, што бисте могли рећи. Верујем да је јКуери тим у једном тренутку размишљао о додавању шаблона, чак се поиграо и „званичним“ додатком, али није успео.
У овом видеу једноставно не радимо оно што се данас традиционално сматра шаблоном. Само правимо нову помоћу јКуери-а и користимо спајање низова за изградњу ХТМЛ-а који нам је потребан и на крају га убризгамо на страницу. У томе нема ничега технички неисправног, али трудим се да се возим кући како овај приступ може брзо измаћи контроли.
У само мало ЈС-а који пишемо у овом видеу, мешамо разне проблеме / послове:
- Добијање података. Имамо га овде само при руци, али вероватно је ово мало сложеније. Можда асинхронизовани Ајак захтев са руковањем грешкама и кеширањем и слично.
- Логика приказа. Одлучујући шта треба да покажемо. Колико? Који делови? На основу чега?
- Руковање догађајима. Нашим ново убризганим див-овима је додато руковање догађајима док смо их креирали, уместо делегирања.
- Темплатинг. ХТМЛ који креирамо за дизајн, структурирање података и прилагођавање или потребе.
Ово је код за шпагете који смо завршили:
Погледајте оловку 31б07ф30дце13б31904да36693б29б41 Цхрис Цоииер (@цхрисцоииер) на ЦодеПен
Следећи блок видео снимака усмериће гомилу на шаблонирање, јер је то изузетно важно, али на крају ћемо некако разбити све ове бриге и завршити са много организованијим и одрживијим кодом.