Arbejde med formularer i Knockout.js

Formularer er en integreret del af enhver applikation eller webside, da det er et af de midler, der gør det muligt for os at indhente brugerdata indbygget, gør dette behandling af dem til en meget almindelig opgave.
Knockout.js giver os mulighed for at arbejde med dit objekt databinding alle de elementer, der kan udgøre en form, og dermed give mulighed for at kunne validere, udløse hændelser, tildele observerbare ting osv. Dette gør formbearbejdning på klientsiden brugbar, og derfor tilføjer vi et ekstra lag med valideringer, før det når serversiden.
KravVi skal kun have Knockout.js i vores system og tilgængelig for de applikationer, vi skal oprette, tilladelser til at skrive filer, en internetforbindelse til at skaffe bibliotekerne, hvis vi ikke har dem, og en tekstredigerer som f.eks. Sublim tekst eller NotePad ++. For at køre applikationerne har vi brug for en webservertype Apache eller Nginx i vores testmiljø.
Inden vi går videre til eksempler med sager, som vi kan anvende, er det meget vigtigt at kende til databinder der kan arbejde med elementerne i vores ansøgningsform, på denne måde kan vi begynde at få en idé om, hvad vi kan og ikke kan opnå, især måderne vi kan få de resultater, vi har brug for for at få vores ansøgning til at fungere korrekt:
DatabindingsværdiDette bruges i værdierne eller markeringsindgangselementerne, de kan være input, tekstområde eller udvalgte elementer, med dette kan vi fange elementets værdi på det tidspunkt, vi skal bruge det.
Databind tekstInputØst bindende bruges med input- og tekstområdeelementerne, ligner dens funktion værdi Men hvis vi tildeler en observerbar til det, kan vi fange værdierne, når brugeren interagerer med elementet, i modsætning til værdi, der giver os værdien, når elementet ændres, for eksempel når det mister fokus.
Databinding kontrolleretDet bruges med elementer af typen afkrydsningsfelt Y radioknapperSom navnet angiver, giver det os mulighed for at fastslå eller vide, om et element er valgt i en struktur, der bruger de nævnte elementer.
DatabindingsmulighederVed at bruge dette bindende Vi kan fylde et udvalgt element med de muligheder, det vil vise i formularen, det er perfekt, når vi vil lave et katalog med muligheder dynamisk.
Databind udvalgte mulighederDet er også eksklusivt for det valgte element, det bruges, når vi skal angive de valgte muligheder, når vi indstiller ejendommen multi, da vi skal vælge mere end én mulighed ad gangenz.
Databinding aktiverer / deaktivererDet giver os mulighed for at aktivere eller deaktivere alle de forskellige elementer i formularen, med dette kan vi fjerne et element, hvis det ikke er nødvendigt at bruge det i applikationsflowet under en bestemt betingelse, hvor aktivere tjener til at aktivere og deaktiver at deaktivere, hvis vi ikke kender betydningen af ​​hvert ord.
Den mest interessante af disse databinder er, at de fungerer på to måder, det vil sige, at når der er en ændring i et element, kan vi modtage det i vores modelvisning og om nødvendigt foretage noget behandling, men også hvis vi har en observerbar, og vi vil gøre noget fra applikationen til formularen kan vi også uden nogen form for problem, så længe vi bruger databinding egnet til typen af ​​formelement, siden Knockout.js det vil ikke fortolke fejlagtige instruktioner, som en browser med kode kunne gøre HTML.
Lad os nu se et praktisk eksempel på, hvordan vi kan bruge alle de begreber, som vi har talt om i det foregående afsnit af denne vejledning, vi skal oprette et element af type tekstområde at den kun accepterer 140 tegn, da denne begrænsning eksisterer, skal vi informere brugeren om, hvor mange tegn han har tilbage, mens han skriver.
Logikken, som vi vil bruge, er meget enkel, vi kommer til at inkludere den data-bind tekstInput i tekstområdet i vores form, så vil vi i vores modelvisning angive det som en observerbar, og så kan vi derefter begynde at fange tegnene, mens brugeren skriver. Endelig bruger vi et element beregnet For at oprette en sammensat observerbar med det samlede antal af de resterende tegn, i øjeblikket vil vi ikke tvinge brugeren til at skrive mindre, vi informerer dem kun om tegnene. Lad os se på koden til vores eksempel:

 Formularer i knockout.js
Indtast en tekst

Resterende tegn: 

Det skal bemærkes, at vi ikke bruger data-bindingsværdi fordi vi har brug for ændring af mængden af ​​resterende tegn til at forekomme på det tidspunkt, brugeren skriver, da hvis ikke kunne vi kun angive mængden på det tidspunkt, det overgår til et andet element, og det ville ikke være optimalt for det, vi målretter mod, når vi bruger Knockout.jsDer vil dog være tilfælde, hvor denne type adfærd er nødvendig, alt afhænger af, hvad vores applikation har brug for. Så lad os se, hvordan vores eksempel ser ud, når vi kører det i browseren:

Selvfølgelig kan vi her ikke dynamisk se, hvordan vores tæller går ned, men når vi skriver vores tæller med resterende tegn, opdateres den, som den er skrevet i formens tekstområdeelement:

Et andet aspekt, som vi ofte har brug for i vores applikationer, når vi arbejder med formularer, er begivenheder, da vi med dem kan udløse handlinger, når brugeren gør noget særligt, f.eks. Et klik eller svæve musen hen over en bestemt sektion af vores HTML. Lad os se nogle af de begivenheder, vi kan bruge i vores former:
Send begivenhedDenne begivenhed kan kun bruges i elementet form, og den aktiveres, bare når brugeren sender formularen til serveren, enten via en input -indsendelse eller med en anden metode.
Klik på begivenhedDenne begivenhed er en gammel bekendt, som navnet angiver, at den er aktiveret, når du klikker på et element i vores applikation.
HasFocus -begivenhedDenne hændelse udløses, når et element generelt input, tekstområde eller markering vælges af brugeren og er aktivt i det øjeblik.
Der er også mulighed for at bruge andre begivenheder, der er tilgængelige i SOL for eksempel mus over, tastetryk for at udvide funktionaliteten af ​​vores modelvisning til disse niveauer.
I den følgende øvelse kommer vi til at anvende kendskabet til begivenheder, som vi har erhvervet, vi skal oprette en lille formular, hvor vi skal have en liste, og hver gang vi holder musen over en mulighed, vil der blive vist et billede vist, vil dette naturligvis være en demonstrativ implementering, og det er ikke egnet til produktion, men det hjælper os med at forstå, hvad vi har arbejdet med.
I dette tilfælde har vi yderligere brug for Knockout.js biblioteket af jQuery at bruge nogle effekter i vores applikation, så det ideelle er at downloade det og gemme det i den samme mappe eller mappe, som vi har Knockout.js, eller måske bruge det fra din CDN officiel. Lad os så se den kode, vi har brug for:

 Formularer i knockout.js

Her er det, vi simpelthen har gjort, at oprette en liste over ting med en beskrivelse og et billede, dette billede kan være tilgængeligt overalt med applikationen, i dette tilfælde har vi valgt dets rodmappe, så opretter vi en funktion, der tilføjer billedet til en vælger med jQuery så vi kan vise det samme i SOL.
I den del af HTML vi ser, at vi har oprettet en liste med de elementer, der tilhører listen ting og sager og endelig angiver vi, at begivenheden er mus over og funktionen, der skal udføres, når denne hændelse opstår. Lad os se, hvordan vores applikation ser ud, når vi kører den i vores browser:

Så hvis vi flytter musemarkøren til nogle af teksterne, indlæses det tilsvarende billede, og vi kan se funktionaliteten i vores eksempel:

Da det er en dynamisk ændring, kan vi selvfølgelig ikke sætte pris på ændringen, men hvis vi flytter markøren til det øverste element, ændres billedet. Hermed er vi færdige med denne vejledning, som vi har dykket ned i arbejdet med formularer med Knockout.js, hvilket giver os værktøjer til at forbedre indsamling og validering af de data, der kommer fra vores brugere.