Рад са обрасцима у Кноцкоут.јс

Обрасци су саставни део било које апликације или веб странице, будући да су једно од средстава која нам омогућавају да изворно прибавимо корисничке податке, што чини њихову обраду врло уобичајеним задатком.
Кноцкоут.јс дозвољава нам да радимо са вашим објектом везати за податке сви елементи који могу чинити форму, дајући тако могућност да буду у могућности да потврде, покрену догађаје, доделе посматране вредности итд. Ово чини обраду образаца на страни клијента изводљивом, па додајемо додатни слој потврда пре него што стигне на страну сервера.
ЗахтевиТребаће нам само да имамо Кноцкоут.јс у нашем систему и приступачне апликацијама које ћемо креирати, дозволе за писање датотека, интернетску везу за добијање библиотека ако их немамо и уређивач текста, као што је Узвишени текст или НотеПад ++. За покретање апликација потребан нам је тип веб сервера Апацхе или Нгинк у нашем окружењу за тестирање.
Пре него што пређемо на примере са случајевима које можемо применити, веома је важно знати повезује податке који могу да функционишу са елементима обрасца наше апликације, на овај начин можемо почети да добијамо идеју о томе шта можемо, а шта не можемо постићи, посебно на начине на које можемо постићи резултате који су нам потребни да би наша апликација радила правилно:
Вредност везана за податкеОво се користи у вредностима или елементима за избор уноса, то могу бити улазни, текстуални или изабрани елементи, са овим можемо ухватити вредност елемента у тренутку када га требамо користити.
ТектИнпут за податкеЕаст везивање се користи са улазним и текстуалним елементима, његова функција је слична вредност Међутим, ако му доделимо посматрано, можемо ухватити вредности током интеракције корисника са елементом, за разлику од вредности која нам даје вредност када се елемент промени, на пример када изгуби фокус.
Провера везаности податакаКористи се са елементима типа поље за потврду И радио дугмадКао што му назив говори, омогућава нам да установимо или знамо да ли је елемент изабран у структури која користи наведене елементе.
Опције везивања податакаКористећи ово везивање Можемо испунити изабрани елемент опцијама које ће приказати у обрасцу, савршен је када желимо да динамички направимо каталог опција.
Повезивање података селецтедОптионсТакође ексклузивно за елемент селецт, користи се када морамо поставити изабране опције приликом постављања својства мулти, пошто морамо да одаберемо више опција одједномз.
Омогућавање / онемогућавање везивања податакаОмогућава нам да омогућимо или онемогућимо било који од различитих елемената обрасца, са овим можемо уклонити елемент ако није потребно користити га у току апликације под било којим посебним условима, где омогућити служи за омогућавање и онемогућити онемогућити, у случају да не знамо значење сваке речи.
Најзанимљивији од ових повезује податке је да они раде на два начина, то јест, када дође до промене елемента, можемо то примити у нашем приказу модела и извршити неку обраду ако је потребно, али и ако имамо уочљиво и желимо да учинимо нешто из апликације у облик можемо и без икаквих проблема, све док користимо везати за податке погодан за тип елемента форме, будући да Кноцкоут.јс неће тумачити погрешна упутства као што би претраживач са кодом могао да уради ХТМЛ.
Погледајмо сада практичан пример како можемо да користимо све концепте о којима смо говорили у претходном одељку овог водича, ми ћемо створити елемент типа тектареа да ће прихватити само 140 знакова, пошто ово ограничење постоји, морамо обавестити корисника колико му је знакова остало док пише.
Логика коју ћемо користити је врло једноставна, укључићемо дата-бинд тектИнпут у текстуалном елементу нашег обрасца, тада ћемо га у нашем приказу модела поставити као видљиво, па можемо почети са снимањем знакова док корисник куца. На крају користимо елемент израчунати Да бисмо створили композитну опсервацију са укупним бројем преосталих знакова, у овом тренутку нећемо натерати корисника да пише мање, само их обавештавамо о знаковима. Погледајмо код за наш пример:

 Обрасци у кноцкоут.јс
Унесите текст

Преостали знакови: 

Треба напоменути да не користимо вредност везана за податке јер нам је потребна промена количине преосталих знакова у тренутку када корисник откуца, јер ако не, могли бисмо само назначити количину у тренутку преласка на други елемент, а то не би било оптимално за оно на шта циљамо када користимо Кноцкоут.јсМеђутим, биће случајева у којима је оваква врста понашања неопходна, све зависи од тога шта је нашој апликацији потребно. Па да видимо како изгледа наш пример када га покренемо у прегледачу:

Наравно, овде не можемо динамички видети како се наш бројач смањује, али када напишемо бројач преосталих знакова, он се ажурира онако како је записано у текстуалном елементу обрасца:

Још један аспект који нам је често потребан у нашим апликацијама при раду са обрасцима су догађаји, јер помоћу њих можемо покренути радње када корисник учини нешто посебно, попут клика, или задржи показивач миша изнад одређеног одељка нашег ХТМЛ. Погледајмо неке догађаје које можемо да користимо у нашим облицима:
Пошаљите догађајОвај догађај се може користити само у елементу образац, а активира се само када корисник пошаље образац серверу, било путем уноса или било којим другим начином.
Кликните на догађајОвај догађај је старо познанство, јер његово име указује да се активира када кликнете на елемент унутар наше апликације.
Догађај ХасФоцусОвај догађај се покреће када корисник опћенито унесе елемент, текстуално подручје или одабир и активан је у том тренутку.
Постоји и могућност коришћења других догађаја који су доступни у СУНЦЕ на пример Миша преко, притисак дугмета како бисмо проширили функционалност приказа нашег модела на те нивое.
У следећој вежби ћемо применити знање о догађајима које смо стекли, направићемо мали образац где ћемо имати списак, и сваки пут када пређемо мишем преко опције, слика ће бити приказано, наравно да ће ово бити демонстративна имплементација и није погодно за производњу, међутим помаже нам да схватимо на чему смо радили.
У овом случају ће нам додатно требати Кноцкоут.јс библиотеку јКуери да бисте користили неке ефекте у нашој апликацији, па је идеално да је преузмете и сачувате у истој фасцикли или директоријуму у којем имамо Кноцкоут.јс, или га можда користити из вашег ЦДН званичник. Хајде да видимо код који нам је потребан:

 Обрасци у кноцкоут.јс

Овде смо једноставно направили списак ствари са описом и сликом. Ова слика апликацији може бити доступна било где, у овом случају смо изабрали њен основни директоријум, а затим креирамо функцију која додаје слику у селектор са јКуери тако да можемо показати исто у СУНЦЕ.
У делу ХТМЛ видимо да смо направили листу са елементима који припадају листи ствари и на крају указујемо да је догађај Миша преко и функцију за извршавање када се овај догађај догоди. Хајде да видимо како наша апликација изгледа када је покренемо у прегледачу:

Затим, ако померимо курсор миша на неки од текстова, учитаће се одговарајућа слика и можемо видети функционалност нашег примера:

Наравно, пошто се ради о динамичкој промени, не можемо да ценимо промену, али ако померимо курсор на горњи елемент, слика ће се променити. Овим смо завршили овај водич, са којим смо зашли у рад са обрасцима са Кноцкоут.јс, дајући нам алате за побољшање хватања и валидације података који долазе од наших корисника.