Arbeider med skjemaer i Knockout.js

Skjemaer er en integrert del av enhver applikasjon eller nettside, siden det er et av måtene som gjør at vi kan skaffe brukerdata innfødt, gjør dette behandling av dem til en veldig vanlig oppgave.
Knockout.js lar oss jobbe med objektet ditt data-bind alle elementene som kan utgjøre et skjema, og dermed gi muligheten til å kunne validere, utløse hendelser, tildele observerbare ting, etc. Dette gjør skjemabehandling på klientsiden brukbar, og derfor legger vi til et ekstra lag med valideringer før den når serversiden.
KravVi trenger bare å ha Knockout.js i systemet vårt og tilgjengelig for applikasjonene vi skal lage, tillatelser til å skrive filer, en Internett -tilkobling for å skaffe bibliotekene hvis vi ikke har dem, og et tekstredigeringsprogram som f.eks. Sublim tekst eller NotePad ++. For å kjøre applikasjonene trenger vi en webservertype Apache eller Nginx i vårt testmiljø.
Før du går videre til eksempler med saker som vi kan bruke, er det veldig viktig å kjenne til databinder som kan fungere med elementene i søknadens form, på denne måten kan vi begynne å få en ide om hva vi kan og ikke kan oppnå, spesielt måtene vi kan få de resultatene vi trenger for å få søknaden vår til å fungere skikkelig:
DatabindingsverdiDette brukes i verdiene eller utvalgsinngangselementene, de kan være input, tekstområde eller utvalgte elementer, med dette kan vi fange verdien av elementet på den tiden vi trenger å bruke det.
Databind tekstInputØst bindende brukes med input- og textarealementene, ligner funksjonen på verdi Imidlertid, hvis vi tilordner en observerbar til det, kan vi fange verdiene når brukeren samhandler med elementet, i motsetning til verdi som gir oss verdien når elementet endres, for eksempel når det mister fokus.
Databinding kontrollertDen brukes med elementer av typen avmerkingsboks Y radioknapperSom navnet indikerer, lar det oss fastslå eller vite om et element er valgt i en struktur som bruker de nevnte elementene.
DatabindingsalternativerVed å bruke dette bindende Vi kan fylle et valgt element med alternativene det vil vise i skjemaet, det er perfekt når vi vil lage en katalog med alternativer dynamisk.
Databind utvalgte alternativerDen er også eksklusiv for det valgte elementet, og brukes når vi må angi de valgte alternativene når vi angir eiendommen multi, siden vi må velge mer enn ett alternativ om gangenz.
Databinding aktivere / deaktivereDet lar oss aktivere eller deaktivere noen av de forskjellige elementene i skjemaet, med dette kan vi fjerne et element hvis det ikke er nødvendig å bruke det i applikasjonsflyten under en bestemt tilstand, der muliggjøre tjener til å aktivere og deaktivere for å deaktivere, hvis vi ikke vet betydningen av hvert ord.
Den mest interessante av disse databinder er at de fungerer på to måter, det vil si at når det er en endring i et element, kan vi motta det i modellvisningen vår og gjøre litt behandling om nødvendig, men også hvis vi har en observerbar og vi ønsker å gjøre noe fra applikasjonen til skjemaet kan vi også uten noen form for problem, så lenge vi bruker data-bind egnet for typen formelement, siden Knockout.js det vil ikke tolke feilaktige instruksjoner som en nettleser med kode kan gjøre HTML.
La oss nå se et praktisk eksempel på hvordan vi kan bruke alle konseptene vi har snakket om i forrige del av denne opplæringen, vi skal lage et element av type tekstområde at den bare godtar 140 tegn, ettersom denne begrensningen eksisterer, må vi informere brukeren om hvor mange tegn han har igjen mens han skriver.
Logikken vi skal bruke er veldig enkel, vi skal inkludere data-bind textInput i tekstområdelementet i formen vår, så i modellvisningen skal vi sette den som en observerbar, og så kan vi begynne å fange tegnene mens brukeren skriver. Til slutt bruker vi et element beregnet For å lage en sammensatt observerbar med summen av de gjenværende tegnene, for øyeblikket kommer vi ikke til å tvinge brukeren til å skrive mindre, vi informerer dem bare om tegnene. La oss se på koden for vårt eksempel:

 Skjemaer i knockout.js
Skriv inn en tekst

Gjenstående karakterer: 

Det skal bemerkes at vi ikke bruker data-bindingsverdi fordi vi trenger endring av mengden gjenværende tegn for å oppstå på det tidspunktet brukeren skriver, siden hvis ikke kunne vi bare indikere mengden på det tidspunktet det går over til et annet element, og det ville ikke være optimalt for det vi målretter mot når vi bruker Knockout.jsImidlertid vil det være tilfeller der denne typen oppførsel er nødvendig, alt avhenger av hva applikasjonen vår trenger. Så la oss se hvordan vårt eksempel ser ut når vi kjører det i nettleseren:

Selvfølgelig kan vi her ikke dynamisk se hvordan telleren vår går ned, men når vi skriver telleren av gjenværende tegn, oppdateres den slik den er skrevet i tekstområdet i skjemaet:

Et annet aspekt som vi ofte trenger i applikasjonene våre når vi arbeider med skjemaer, er hendelser, siden vi med dem kan utløse handlinger når brukeren gjør noe spesielt, for eksempel et klikk, eller holder musen over en bestemt del av vår HTML. La oss se noen av hendelsene som vi kan bruke i formene våre:
Send inn arrangementDenne hendelsen kan bare brukes i elementet skjema, og den aktiveres akkurat når brukeren sender skjemaet til serveren, enten via innsending av innspill, eller med en annen metode.
Klikk hendelseDenne hendelsen er en gammel bekjent, ettersom navnet indikerer at den er aktivert når du klikker på et element i applikasjonen vår.
HasFocus -arrangementDenne hendelsen utløses når et element som vanligvis skrives inn, tekstområde eller velg er valgt av brukeren og er aktivt i det øyeblikket.
Det er også mulighet for å bruke andre arrangementer som er tilgjengelige i SOL for eksempel mus over, tastetrykk for å utvide funksjonaliteten til modellvisningen til disse nivåene.
I den følgende øvelsen skal vi bruke kunnskapen om hendelser som vi har tilegnet oss, vi skal lage en liten form der vi skal ha en liste, og hver gang vi holder musen over et alternativ, vil et bilde bli vises, vil dette selvfølgelig være en demonstrativ implementering og det er ikke egnet for produksjon, men det hjelper oss å forstå hva vi har jobbet med.
I dette tilfellet trenger vi i tillegg Knockout.js biblioteket til jQuery å bruke noen effekter i programmet vårt, så det ideelle er å laste det ned og lagre det i den samme mappen eller katalogen som vi har Knockout.js, eller kanskje bruke den fra din CDN offisielt. La oss se koden vi trenger:

 Skjemaer i knockout.js

Her er det vi ganske enkelt har gjort, å lage en liste over ting med en beskrivelse og et bilde, dette bildet kan være hvor som helst tilgjengelig for programmet, i dette tilfellet har vi valgt dets rotkatalog, så lager vi en funksjon som legger bildet til en velger med jQuery slik at vi kan vise det samme i SOL.
I den delen av HTML vi ser at vi har laget en liste med elementene som tilhører listen ting og til slutt indikerer vi at hendelsen er mus over og funksjonen som skal utføres når denne hendelsen skjer. La oss se hvordan applikasjonen vår ser ut når vi kjører den i nettleseren vår:

Så hvis vi flytter musemarkøren til noen av tekstene, vil det tilsvarende bildet lastes inn, og vi kan se funksjonaliteten til vårt eksempel:

Selvfølgelig, ettersom det er en dynamisk endring, kan vi ikke sette pris på endringen, men hvis vi flytter markøren til det øvre elementet, vil bildet endres. Med dette har vi fullført denne opplæringen, som vi har fordypet oss i arbeidet med skjemaer med Knockout.js, gir oss verktøy for å forbedre fangst og validering av dataene som kommer fra brukerne våre.