Работа с формуляри в Knockout.js

Формулярите са неразделна част от всяко приложение или уеб страница, тъй като това е едно от средствата, които ни позволяват да получаваме потребителски данни на първо място, това прави обработката им много често срещана задача.
Knockout.js ни позволява да работим с вашия обект обвързване на данни всички елементи, които могат да съставят форма, като по този начин дават възможност за валидиране, задействане на събития, присвояване на наблюдаеми и т.н. Това прави обработката на формуляри от страна на клиента работеща и затова добавяме допълнителен слой валидации, преди да достигне до сървъра.
ИзискванияЩе трябва само да имаме Knockout.js в нашата система и достъпни за приложенията, които ще създаваме, разрешения за писане на файлове, интернет връзка за получаване на библиотеките, ако нямаме такива, и текстов редактор като Възвишен текст или NotePad ++. За да стартираме приложенията, се нуждаем от тип уеб сървър Apache или Nginx в нашата тестова среда.
Преди да преминем към примери със случаи, които можем да приложим, е много важно да знаем обвързва данни които могат да работят с елементите на формата на нашето приложение, по този начин можем да започнем да добиваме представа какво можем и какво не можем да постигнем, особено начините, по които можем да получим резултатите, от които се нуждаем, за да накараме нашето приложение да работи правилно:
Стойност, свързана с данниТова се използва в стойностите или елементите за избор на вход, те могат да бъдат входни, текстови области или избрани елементи, с това можем да уловим стойността на елемента в момента, в който трябва да го използваме.
Текст, свързан с данниизток обвързващ се използва с входните и текстовите елементи, неговата функция е подобна на стойност Ако обаче му присвоим наблюдавано, можем да уловим стойностите, докато потребителят взаимодейства с елемента, за разлика от стойността, която ни дава стойността, когато елементът се промени, например когато загуби фокус.
Свързване на данни е провереноИзползва се с елементи от типа квадратче за отметка Y бутони за изборКакто показва името му, той ни позволява да установим или знаем дали даден елемент е избран в структура, която използва споменатите елементи.
Опции за обвързване на данниКато използвате това обвързващ Можем да запълним елемент за избор с опциите, които той ще покаже във формата, той е идеален, когато искаме да направим каталог с опции динамично.
Свързване на данни избрани ОпцииИзключително и за избрания елемент, той се използва, когато трябва да зададем избраните опции при задаване на свойството мулти, тъй като трябва да избираме повече от една опция наведнъжz.
Активиране / деактивиране на свързване на данниПозволява ни да активираме или деактивираме някой от различните елементи на формуляра, с това можем да премахнем елемент, ако не е необходимо да го използваме в потока на приложение при някакво конкретно условие, където активирайте служи за активиране и деактивирайте да деактивираме, в случай че не знаем значението на всяка дума.
Най -интересният от тях обвързва данни е, че те работят по два начина, тоест, когато има промяна в елемент, можем да го получим в нашия изглед на модел и да направим известна обработка, ако е необходимо, но също така, ако имаме наблюдаемо и искаме да направим нещо от приложението към формата можем също без никакъв проблем, стига да използваме обвързване на данни подходящ за типа формулярен елемент, тъй като Knockout.js няма да тълкува грешни инструкции, както би могъл да направи браузър с код HTML.
Нека сега видим практически пример за това как можем да използваме всички концепции, за които говорихме в предишния раздел на този урок, ще създадем елемент от тип текстово поле че ще приеме само 140 знака, тъй като това ограничение съществува, трябва да информираме потребителя колко знака му е останало, докато пише.
Логиката, която ще използваме, е много проста, ще включим обвързан с данни textInput в елемента textarea на нашата форма, тогава в нашия моделен изглед ще го зададем като наблюдаем и така можем да започнем да улавяме знаците, докато потребителят пише. Накрая използваме елемент изчислена За да създадем съставен наблюдаем с общия брой на останалите знаци, в момента няма да принуждаваме потребителя да пише по -малко, ние само ги информираме за знаците. Нека да разгледаме кода за нашия пример:

 Формуляри в knockout.js
Въведете текст

Оставащи знаци: 

Трябва да се отбележи, че ние не използваме стойност за обвързване на данни защото се нуждаем от промяна в количеството на оставащите знаци в момента, в който потребителят въведе, тъй като в противен случай бихме могли да посочим само количеството в момента, в който преминава към друг елемент и това не би било оптимално за това, към което насочваме, когато използваме Knockout.jsВъпреки това, ще има случаи, в които този тип поведение е необходимо, всичко зависи от това, от което се нуждае нашето приложение. Нека да видим как изглежда нашият пример, когато го стартираме в браузъра:

Разбира се, тук не можем динамично да видим как се изчислява нашият брояч, но когато напишем брояча на останалите знаци, той се актуализира, както е написано в елемента textarea на формата:

Друг аспект, от който често се нуждаем в нашите приложения при работа с формуляри, са събития, тъй като с тях можем да задействаме действия, когато потребителят прави нещо по -специално, като например щракване, или задръжте курсора на мишката върху определен раздел от нашия HTML. Нека да видим някои от събитията, които можем да използваме в нашите форми:
Изпратете събитиеТова събитие може да се използва само в елемента форма, и се активира точно когато потребителят изпрати формуляра на сървъра, или чрез подаване на въвеждане, или с някакъв друг метод.
Щракнете върху събитиеТова събитие е старо познато, тъй като името му показва, че се активира, когато кликнете върху елемент в нашето приложение.
Събитие HasFocusТова събитие се задейства, когато елементът обикновено въвежда, текстово поле или изберете е избран от потребителя и е активен в този момент.
Има и възможност за използване на други събития, които са налични в СЛЪНЦЕ например мишката, натискане на клавиш за да разширим функционалността на нашия моделен изглед до тези нива.
В следващото упражнение ще приложим знанията за събития, които сме придобили, ще създадем малка форма, където ще имаме списък и всеки път, когато задържите курсора на мишката върху опция, изображение ще бъде показва, разбира се, това ще бъде демонстративно изпълнение и не е подходящо за производство, но ни помага да разберем върху какво работим.
В този случай ще имаме допълнителна нужда Knockout.js библиотеката на jQuery за да използвате някои ефекти в нашето приложение, така че идеалното е да го изтеглите и запишете в същата папка или директория, в която имаме Knockout.js, или може би го използвайте от вашия CDN официален. Нека да видим кода, от който се нуждаем:

 Формуляри в knockout.js

Тук това, което просто направихме, е да създадем списък с неща с описание и изображение, това изображение може да бъде достъпно навсякъде от приложението, в този случай сме избрали неговата основна директория, след това създаваме функция, която добавя изображението към селектор с jQuery за да можем да покажем същото в СЛЪНЦЕ.
В частта на HTML виждаме, че сме създали списък с елементите, принадлежащи към списъка неща и накрая посочваме, че събитието е мишката и функцията за изпълнение, когато това събитие се случи. Нека да видим как изглежда нашето приложение, когато го стартираме в браузъра си:

След това, ако преместим курсора на мишката към някои от текстовете, съответното изображение ще се зареди и ще видим функционалността на нашия пример:

Разбира се, тъй като това е динамична промяна, не можем да оценим промяната, но ако преместим курсора към горния елемент, изображението ще се промени. С това завършихме този урок, с който се задълбочихме в работата с формуляри с Knockout.js, като ни предоставя инструменти за подобряване на улавянето и валидирането на данните, които идват от нашите потребители.