Lucrul cu formularele din Knockout.js

Formularele fac parte integrantă din orice aplicație sau pagină web, deoarece este unul dintre mijloacele care ne permit să obținem date de utilizator în mod nativ, ceea ce face ca prelucrarea acestora să fie o sarcină foarte obișnuită.
Knockout.js ne permite să lucrăm cu obiectul dvs. legare de date toate elementele care pot compune un formular, oferind astfel posibilitatea de a putea valida, declanșa evenimente, atribui observabile etc. Acest lucru face ca procesarea formularelor din partea clientului să fie funcțională și, prin urmare, adăugăm un strat suplimentar de validări înainte ca acesta să ajungă la partea serverului.
CerințeVa trebui doar să avem Knockout.js în sistemul nostru și accesibil aplicațiilor pe care le vom crea, permisiuni pentru a scrie fișiere, o conexiune la Internet pentru a obține bibliotecile dacă nu le avem și un editor de text, cum ar fi Text sublim sau NotePad ++. Pentru a rula aplicațiile avem nevoie de un tip de server web Apache sau Nginx în mediul nostru de testare.
Înainte de a trece la exemple cu cazuri pe care le putem aplica, este foarte important să cunoaștem legături de date care pot funcționa cu elementele din formularul aplicației noastre, astfel putem începe să ne facem o idee despre ceea ce putem și nu putem realiza, în special modurile în care putem obține rezultatele de care avem nevoie pentru ca aplicația noastră să funcționeze corect:
Valoare de legare a datelorAceasta este utilizată în valori sau elemente de intrare de selecție, acestea pot fi elemente de intrare, textarea sau elemente selectate, cu aceasta putem capta valoarea elementului în momentul în care trebuie să-l folosim.
Data-bind textInputEst legare este utilizat cu elementele de intrare și textarea, funcția sa este similară cu valoare Cu toate acestea, dacă îi atribuim un observabil, putem capta valorile pe măsură ce utilizatorul interacționează cu elementul, spre deosebire de valoarea care ne oferă valoarea atunci când elementul se schimbă, de exemplu atunci când pierde focalizarea.
Data-bind verificatăSe folosește cu elemente de acest tip Caseta de bifat Da butoane radioDupă cum indică și numele, ne permite să stabilim sau să știm dacă un element este selectat într-o structură care utilizează elementele menționate.
Opțiuni de legare a datelorFolosind acest lucru legare Putem umple un element selectat cu opțiunile pe care le va afișa în formular, este perfect atunci când dorim să realizăm un catalog de opțiuni dinamic.
Data-bind selectedOptionsDe asemenea, exclusiv pentru elementul selectat, este utilizat atunci când trebuie să setăm opțiunile selectate atunci când setăm proprietatea multi, deoarece trebuie să alegem mai multe opțiuni odatăz.
Activare / dezactivare legare dateNe permite să activăm sau să dezactivăm oricare dintre diferitele elemente ale formularului, cu aceasta putem elimina un element dacă nu este necesar să-l folosim în fluxul aplicației în orice condiție specială, unde permite servește pentru a permite și dezactivați a dezactiva, în cazul în care nu cunoaștem semnificația fiecărui cuvânt.
Cel mai interesant dintre acestea legături de date este că funcționează în două moduri, adică atunci când există o modificare într-un element, îl putem primi în vizualizarea modelului nostru și putem efectua unele prelucrări, dacă este necesar, dar și dacă avem un observabil și vrem să facem ceva din aplicație la formular putem, de asemenea, fără nici un fel de problemă, atâta timp cât folosim legare de date potrivit pentru tipul de element de formă, deoarece Knockout.js nu va interpreta instrucțiunile eronate așa cum ar putea face un browser cu cod HTML.
Să vedem acum un exemplu practic al modului în care putem folosi toate conceptele despre care am vorbit în secțiunea anterioară a acestui tutorial, vom crea un element de tip textarea că va accepta doar 140 de caractere, deoarece există această restricție, trebuie să informăm utilizatorul câte caractere a rămas în timp ce scrie.
Logica pe care o vom folosi este foarte simplă, vom include date-bind textInput în elementul textarea din formularul nostru, apoi în vizualizarea modelului nostru, îl vom seta ca observabil, și astfel putem începe să capturăm caracterele pe măsură ce utilizatorul tastează. În cele din urmă, folosim un element calculat Pentru a crea un compozit observabil cu totalul caracterelor rămase, în acest moment nu vom forța utilizatorul să scrie mai puțin, îi informăm doar despre personaje. Să vedem codul pentru exemplul nostru:

 Formulare în knockout.js
Introduceți un text

Caractere ramase: 

Trebuie remarcat faptul că nu folosim valoare de legare a datelor pentru că avem nevoie de modificarea cantității de caractere rămase pentru a avea loc în momentul în care utilizatorul tastează, deoarece dacă nu, am putea indica doar cantitatea în momentul în care trece la un alt element și asta nu ar fi optim pentru ceea ce vizăm atunci când folosim Knockout.jsCu toate acestea, vor exista cazuri în care acest tip de comportament este necesar, totul depinde de ce are nevoie aplicația noastră. Deci, să vedem cum arată exemplul nostru când îl rulăm în browser:

Desigur, aici nu putem vedea dinamic cum scade contorul nostru, dar când scriem contorul caracterelor rămase, acesta este actualizat așa cum este scris în elementul textarea formularului:

Un alt aspect de care avem adesea nevoie în aplicațiile noastre atunci când lucrăm cu formulare sunt evenimentele, deoarece cu acestea putem declanșa acțiuni atunci când utilizatorul face ceva anume, cum ar fi un clic, sau treceți mouse-ul peste o anumită secțiune din HTML. Să vedem câteva dintre evenimentele pe care le putem folosi în formularele noastre:
Trimiteți evenimentulAcest eveniment poate fi utilizat numai în element formă, și este activat exact când utilizatorul trimite formularul către server, fie printr-o trimitere de intrare, fie cu o altă metodă.
Faceți clic pe evenimentAcest eveniment este o cunoștință veche, deoarece numele său indică faptul că este activat atunci când faceți clic pe un element din aplicația noastră.
Evenimentul HasFocusAcest eveniment este declanșat atunci când un element introdus, textarea sau selectarea este selectat de utilizator și este activ în acel moment.
Există, de asemenea, posibilitatea de a utiliza alte evenimente disponibile în SOARE de exemplu mouse-ul peste, apăsarea tastei pentru a extinde funcționalitatea modului nostru de vizualizare la nivelurile respective.
În exercițiul următor vom aplica cunoștințele despre evenimentele pe care le-am dobândit, vom crea o formă mică în care vom avea o listă și de fiecare dată când trecem mouse-ul peste o opțiune, o imagine va fi afișat, desigur, aceasta va fi o implementare demonstrativă și nu este potrivită pentru producție, însă ne ajută să înțelegem la ce am lucrat.
În acest caz, vom avea nevoie în plus Knockout.js biblioteca din jQuery pentru a utiliza unele efecte în aplicația noastră, deci idealul este să-l descărcăm și să-l salvăm în același folder sau director în care avem Knockout.js, sau poate folosiți-l din CDN oficial. Să vedem atunci codul de care avem nevoie:

 Formulare în knockout.js

Aici ceea ce am făcut pur și simplu este să creăm o listă de lucruri cu o descriere și o imagine, această imagine poate fi accesată oriunde de către aplicație, în acest caz am ales directorul său rădăcină, apoi creăm o funcție care adaugă imaginea la un selector cu jQuery astfel încât să putem arăta același lucru în SOARE.
În partea de HTML vedem că am creat o listă cu elementele care aparțin listei chestie și în cele din urmă indicăm că evenimentul este mouse-ul peste și funcția de executat atunci când apare acest eveniment. Să vedem cum arată aplicația noastră când o rulăm în browserul nostru:

Apoi, dacă mutăm cursorul mouse-ului pe unele dintre texte, imaginea corespunzătoare se va încărca și putem vedea funcționalitatea exemplului nostru:

Desigur, deoarece este o schimbare dinamică, nu putem aprecia schimbarea, dar dacă mutăm cursorul către elementul superior, imaginea se va schimba. Cu aceasta am terminat acest tutorial, cu care ne-am adâncit în munca formelor cu Knockout.js, oferindu-ne instrumente pentru a îmbunătăți captarea și validarea datelor care vin de la utilizatorii noștri.