Arbeta med formulär i Knockout.js

Formulär är en integrerad del av alla applikationer eller webbsidor, eftersom det är ett av medlen som gör att vi kan få användardata inbyggt, vilket gör det till en mycket vanlig uppgif.webpt.
Knockout.js tillåter oss att arbeta med ditt objekt databindning alla element som kan utgöra en form, vilket ger möjligheten att kunna validera, utlösa händelser, tilldela observerbara, etc. Detta gör formulärbearbetning på klientsidan användbar, och så lägger vi till ett ytterligare lager av valideringar innan det når serversidan.
KravVi behöver bara ha Knockout.js i vårt system och tillgängligt för de applikationer som vi ska skapa, behörigheter att skriva filer, en internetanslutning för att få biblioteken om vi inte har dem och en textredigerare som t.ex. Sublim text eller NotePad ++. För att köra applikationerna behöver vi en webbservertyp Apache eller Nginx i vår testmiljö.
Innan vi går vidare till exempel med fall som vi kan tillämpa är det mycket viktigt att känna till databinder som kan fungera med elementen i vår ansökningsform, på så sätt kan vi börja få en uppfattning om vad vi kan och inte kan uppnå, särskilt hur vi kan få de resultat vi behöver för att vår ansökan ska fungera korrekt:
DatabindningsvärdeDetta används i värdena eller urvalsinmatningselementen, de kan vara ingångs-, textområde eller utvalda element, med detta kan vi fånga värdet på elementet vid den tidpunkt vi behöver använda det.
Databind textInputÖster bindande används med inmatnings- och textområdeselementen, liknar dess funktion värde Men om vi tilldelar en observerbar till det kan vi fånga värdena när användaren interagerar med elementet, till skillnad från värde som ger oss värdet när elementet ändras, till exempel när det tappar fokus.
Databindning kontrolleradDen används med element av typen kryssruta Y radioknapparSom namnet indikerar tillåter det oss att fastställa eller veta om ett element är valt i en struktur som använder de nämnda elementen.
DatabindningsalternativGenom att använda detta bindande Vi kan fylla ett utvalt element med alternativen som det kommer att visa i formuläret, det är perfekt när vi vill göra en katalog med alternativ dynamiskt.
Data-binda valda alternativDet är också exklusivt för det valda elementet, det används när vi behöver ställa in de valda alternativen när vi ställer fastigheten mång, eftersom vi måste välja mer än ett alternativ i tagetz.
Databindning aktiverar / inaktiverarDet tillåter oss att aktivera eller inaktivera någon av de olika elementen i formuläret, med detta kan vi ta bort ett element om det inte är nödvändigt att använda det i applikationsflödet under något särskilt villkor, där Gör det möjligt tjänar till att möjliggöra och inaktivera att inaktivera, om vi inte vet vad varje ord betyder.
Det mest intressanta av dessa databinder är att de fungerar på två sätt, det vill säga när det sker en förändring i ett element kan vi ta emot det i vår modellvy och göra lite behandling om det behövs, men också om vi har en observerbar och vi vill göra något från applikationen till formen kan vi också utan någon form av problem, så länge vi använder databindning lämplig för typen av formelement, eftersom Knockout.js det kommer inte att tolka felaktiga instruktioner som en webbläsare med kod kan göra HTML.
Låt oss nu se ett praktiskt exempel på hur vi kan använda alla de begrepp som vi har pratat om i föregående avsnitt i denna handledning, vi ska skapa ett element av typ textområde att den endast accepterar 140 tecken, eftersom denna begränsning finns, måste vi informera användaren om hur många tecken han har kvar när han skriver.
Logiken som vi kommer att använda är mycket enkel, vi kommer att inkludera data-bind textInput i textområdeselementet i vår form, sedan i vår modellvy kommer vi att ställa in det som en observerbar, och så kan vi sedan börja fånga tecknen medan användaren skriver. Slutligen använder vi ett element beräknad För att skapa en sammansatt observerbar med summan av de återstående tecknen, för närvarande kommer vi inte att tvinga användaren att skriva mindre, vi informerar dem bara om tecknen. Låt oss titta på koden för vårt exempel:

 Formulär i knockout.js
Ange en text

Återstående karaktärer: 

Det bör noteras att vi inte använder databindningsvärde eftersom vi behöver ändra mängden återstående tecken för att inträffa vid den tidpunkt som användaren skriver, eftersom om inte så skulle vi bara kunna ange mängden vid den tidpunkt det övergår till ett annat element och det skulle inte vara optimalt för det vi riktar in oss på när vi använder Knockout.jsDet kommer dock att finnas fall där denna typ av beteende är nödvändigt, allt beror på vad vår applikation behöver. Så låt oss se hur vårt exempel ser ut när vi kör det i webbläsaren:

Naturligtvis kan vi här inte dynamiskt se hur vår räknare går ner, men när vi skriver vår räknare för återstående tecken uppdateras den som den är skriven i textområdets element i formuläret:

En annan aspekt som vi ofta behöver i våra applikationer när vi arbetar med formulär är händelser, eftersom vi med dem kan utlösa åtgärder när användaren gör något särskilt, till exempel ett klick, eller för musen över en viss del av vår HTML. Låt oss se några av de händelser som vi kan använda i våra former:
Skicka in eventDenna händelse kan endast användas i elementet form, och det aktiveras precis när användaren skickar in formuläret till servern, antingen genom en inmatningssändning eller med någon annan metod.
Klicka på händelseDenna händelse är en gammal bekant, som namnet indikerar att den är aktiverad när du klickar på ett element i vår applikation.
HasFocus -evenemangDenna händelse avfyras när ett element generellt matas in, textområde eller välj väljs av användaren och är aktivt i det ögonblicket.
Det finns också möjlighet att använda andra evenemang som är tillgängliga i SOL till exempel mus över, knapptryckning för att utöka funktionaliteten i vår modellvy till dessa nivåer.
I följande övning kommer vi att tillämpa kunskapen om händelser som vi har förvärvat, vi kommer att skapa en liten form där vi ska ha en lista, och varje gång vi håller musen över ett alternativ kommer en bild att visas, kommer detta naturligtvis att vara en demonstrativ implementering och det är inte lämpligt för produktion, men det hjälper oss att förstå vad vi har arbetat med.
I det här fallet kommer vi också att behöva Knockout.js biblioteket av jQuery att använda vissa effekter i vår applikation, så det idealiska är att ladda ner den och spara den i samma mapp eller katalog som vi har Knockout.js, eller kanske använda den från din CDN officiell. Låt oss då se koden vi behöver:

 Formulär i knockout.js

Här vad vi helt enkelt har gjort är att skapa en lista med saker med en beskrivning och en bild, den här bilden kan vara tillgänglig var som helst, i det här fallet har vi valt dess rotkatalog, sedan skapar vi en funktion som lägger till bilden till en väljare med jQuery så att vi kan visa detsamma i SOL.
I den del av HTML vi ser att vi har skapat en lista med de element som tillhör listan grejer och slutligen anger vi att händelsen är mus över och funktionen att utföra när denna händelse inträffar. Låt oss se hur vår applikation ser ut när vi kör den i vår webbläsare:

Om vi ​​flyttar muspekaren till några av texterna laddas motsvarande bild och vi kan se funktionen i vårt exempel:

Naturligtvis, eftersom det är en dynamisk förändring, kan vi inte uppskatta förändringen, men om vi flyttar markören till det övre elementet kommer bilden att förändras. Med detta har vi avslutat denna handledning, som vi har fördjupat oss i arbetet med formulär med Knockout.js, ger oss verktyg för att förbättra fångst och validering av data som kommer från våra användare.