Accentsconagua

Interaktive bindinger

Kode
Share

Formelementer er den konvensjonelle måten å samhandle med brukere gjennom en nettside. Arbeide med skjemaer i Knockout.js er omtrent det samme som å jobbe med utseende bindinger. Men siden brukere kan redigere skjemafelt, administrerer Knockout.js oppdateringer i begge retninger. Dette betyr at interaktive bindinger er toveis. De kan settes programmatisk og visningen oppdateres tilsvarende, eller de kan settes av visningen og leses programmatisk.

Figur 19: Knockout.js forplantning endres i begge retninger

For eksempel kan du angi verdien av et tekstfelt fra ViewModel, og det vil bli vist i visningen. Men brukeren skriver noe i inntastingsfeltet fører til at den tilknyttede eiendommen på ViewModel oppdateres også. Poenget er, Knockout.js sørger alltid for at visningen og ViewModel er synkronisert.

Knockout.js inneholder 11 bindinger for samhandling med brukeren:

  • klikk: -Ring en ViewModel-metode når elementet klikkes.
  • verdi: -Link et formelements verdi til en ViewModel-egenskap.
  • begivenhet: -Kall en metode når en brukerinitiert hendelse oppstår.
  • sende inn: -Ring en metode når et skjema er sendt inn.
  • Aktiver: -Aktiver et skjemaelement basert på en bestemt tilstand.
  • deaktivere: -Deaktiver et formelement basert på en bestemt tilstand.
  • sjekket: -Koble en radioknapp eller avmerkingsboks til en ViewModel-egenskap.
  • opsjoner: -Definer a felt.
  • hasfocus: -Definer om elementet er fokusert eller ikke.

    • Som utseendet bindinger presentert i den forrige leksjonen, er disse alle definert i data-bindingsattributtet til et HTML-element. Noen av dem (som klikk bindende) arbeid på noe element, men andre (som sjekket) kan bare brukes med bestemte elementer.

    En av de største fordelene med å bruke Knockout.js til å administrere HTML-skjemaer er det du fortsatt bare trenger å bekymre deg for dataene. Når brukeren endrer et formelements verdi, reflekterer ViewModel automatisk oppdateringen. Dette gjør det veldig enkelt å integrere brukerinngangene i resten av applikasjonen.

    En HTML-skjema

    Denne leksjonen bruker en ny HTML-side for det kjørende eksemplet. I stedet for en handlekurvsvisningsside, jobber vi med et registreringsskjema for nye kunder. Opprett en ny HTML-fil kalt interaktiv-bindings.html og legg til følgende:

       Interaktive bindinger

    Dette er en forenklet versjon av det vi har jobbet med i hele serien. I denne leksjonen vil vi bare være bekymret for konfigurering formelementer. Behandlingsskjemainnlegg er igjen for neste leksjon.

    De klikk binding

    Klikk bindingen er en av de enkleste interaktive bindingene. Det kaller bare en metode for ViewModel når brukeren klikker elementet. For eksempel, legg til følgende knapp innsiden av

    element:

    Når brukeren klikker på knappen, kalles Knockout.js saveUserData () metode på PersonViewModel. I tillegg går det to parametre til håndteringsmetoden: den nåværende modellen og DOM-hendelsen. En saveUserData () -metode som bruker begge disse parameterne, ser ut som om:

     this.saveUserData = funksjon (modell, begivenhet) alert (model.firstName () + "prøver å sjekke ut!"); hvis (event.ctrlKey) alert ("Han holdt nede kontrolltasten av en eller annen grunn."); ;

    I dette spesielle eksempelet, modell refererer til den øverste ViewModel-forekomsten, og begivenhet er DOM-hendelsen trigget av brukerens klikk. Modellen argumentet vil alltid være nåværende ViewModel, som gjør det mulig å få tilgang til individuelle listeposter i en foreach loop. Slik implementerte vi methoden removeProduct () i leksjon 3:.

    De verdi binding

    Verdibindingen er veldig lik den tekstbindingen vi har brukt gjennom hele denne serien. Hovedforskjellen er at den kan endres av bruker, og ViewModel vil oppdatere tilsvarende. For eksempel kan vi lenke fornavn og etternavn observables med et inputfelt ved å legge til følgende HTML i skjemaet (før

    Håndteringsmetodene skal se ut som følgende:

     this.displayName = function () alert (this.firstName ()); ; this.setName = function () this.firstName ("Bob"); ;

    Klikker Visningsnavn vil lese ViewModels fornavn eiendom, som burde matche element, selv om det har blitt redigert av brukeren. De Angi navn knappen setter verdien av ViewModels eiendom, forårsaker element for å oppdatere. Oppførselen til sistnevnte er i hovedsak den samme som en normal tekstbinding.

    Igjen, hele poenget bak denne toveissynkroniseringen er å la deg fokusere på dataene dine. Etter at du har satt opp en verdi bindende, kan du helt glemme HTML-skjemaelementer. Bare få eller sett tilhørende eiendom på ViewModel og Knockout.js vil ta vare på resten.

    Vi vil ikke trenge display og setName-metoder eller deres respektive knapper, så du kan fortsette og slette dem hvis du vil.

    De begivenhet binding

    De begivenhet bindende lar deg lytte til vilkårlig DOM-hendelser på et hvilket som helst HTML-element. Det er som en generisk versjon av klikk bindende. Men fordi det kan lytte etter flere hendelser, krever det et objekt å kartlegge hendelser til metoder (dette ligner attr-bindingsparameteren). For eksempel kan vi lytte til mouseover og mouseout hendelser på den første element med følgende:

     
     Fornavn:

    Når brukeren brenner a mus over Hendelse, Knockout.js kaller Vis detaljer() metode for vår ViewModel. På samme måte, når han eller hun forlater elementet, kalles hideDetails (). Begge disse tar de samme parameterne som klikkbindingens håndterer: målet for hendelsen og selve objektet. La oss implementere disse metodene nå:

     this.showDetails = funksjon (mål, hendelse) alert ("Mouse over"); ; this.hideDetails = funksjon (mål, hendelse) alert ("Mouse out"); ;

    Nå, når du samhandler med Fornavn feltet, bør du se begge meldingene dukker opp. Men i stedet for bare å vise en varselmelding, la oss vise litt ekstra informasjon for hvert skjemafelt når brukeren ruller over den. For dette trenger vi en annen observerbar på PersonViewModel:

     this.details = ko.observable (false);

    De detaljer Egenskapen fungerer som en bytte, som vi kan slå på og av med våre hendelseshåndteringsmetoder:

     this.showDetails = funksjon (mål, hendelse) this.details (true); ; this.hideDetails = funksjon (mål, hendelse) this.details (false); ;

    Da kan vi kombinere vekselen med synlig bindende for å vise eller skjule skjemafeltdetaljer i visningen:

     
     Fornavn:  Ditt navn

    Innholdet i bør vises når du musen over Fornavn feltet og forsvinner når du musen ut. Dette er ganske nært til ønsket funksjonalitet, men ting blir mer komplisert når vi vil vise detaljer for mer enn ett skjemafelt. Siden vi bare har en toggle-variabel, er det en all-or-nothing-proposisjon å vise detaljer, enten detaljer vises for alle av feltene, eller for ingen av dem.

    Figur 21: Bytte alle skjemafelt detaljer samtidig

    En måte å løse dette på er å sende en tilpasset parameter til håndteringsfunksjonen.

    Event Handlers med tilpassede parametere

    Det er mulig å sende tilpassede parametere fra visningen til hendelseshandleren. Dette betyr at du kan få tilgang til vilkårlig informasjon fra visningen til ViewModel. I vårt tilfelle bruker vi en tilpasset parameter for å identifisere hvilket skjemafelt som skal vise detaljene. I stedet for en veksle, den detaljer observerbar vil inneholde en streng som representerer det valgte elementet. Først vil vi gjøre noen små endringer i ViewModel:

     this.details = ko.observable (""); this.showDetails = funksjon (mål, begivenhet, detaljer) this.details (detaljer);  this.hideDetails = funksjon (mål, event) this.details ("");

    Den eneste store forandringen her er tillegg av a detaljer parameter til Vis detaljer() metode. Vi trenger ikke en egendefinert parameter for funksjonen hideDetails () siden det bare fjerner detaljene som er observerbare.

    Deretter bruker vi en funksjon bokstavelig i begivenhet bindende for å sende den egendefinerte parameteren til showDetails ():

    Funksjonen bokstavelig for mus over er en wrapper for vår Vis detaljer() handler, gir en enkel måte å passere i ekstra informasjon. Mouseout handler forblir uendret. Til slutt må vi oppdatere inneholder detaljene:

     Ditt navn

    De Fornavn skjemafelt skal vise sin detaljerte beskrivelse når du musen over og skjuler når du musen ut, akkurat som den gjorde i forrige seksjon. Bare nå, det er mulig å legge til detaljer i mer enn ett felt ved å endre den egendefinerte parameteren. For eksempel kan du aktivere detaljer for Etternavn Inndataelement med:

     
     Etternavn:  Ditt etternavn

    Eventbinding kan være litt komplisert å sette opp, men når du forstår hvordan de fungerer, muliggjør de ubegrensede muligheter for reaktiv design. De begivenhet bindende kan til og med koble til jQuery's animasjonsfunksjonalitet, som diskuteres i leksjon 8 :. For nå skal vi fullføre utforskningen av resten av Knockout.js interaktive bindinger. Heldigvis for oss er ingen av dem nesten like kompliserte som hendelsesbindinger.

    De på av Bindinger

    De Aktiver og deaktivere bindinger kan brukes til å aktivere eller deaktivere skjemafelter basert på visse forhold. For eksempel, la oss si at du ønsket å ta opp et primært og et sekundært telefonnummer for hver bruker. Disse kan lagres som normale observables på PersonViewModel:

     this.primaryPhone = ko.observable (""); this.secondaryPhone = ko.observable ("");

    Den primærePhone observerbare kan kobles til et skjemafelt med en normal verdi bindende:

     
     Hoved telefon:

    Det er imidlertid ikke fornuftig å skrive inn et sekundært telefonnummer uten å spesifisere en primær, så vi aktiverer for det sekundære telefonnummeret bare hvis primaryPhone ikke er tomt:

     
     Sekundær telefon:

    Nå vil brukerne kun kunne samhandle med Sekundær telefon feltet hvis de har oppgitt en verdi for Hoved telefon. De deaktivere bindende er en praktisk måte å negere på tilstanden, men ellers fungerer akkurat som aktivere.

    De sjekket binding

    sjekket er en allsidig binding som utviser forskjellig atferd, avhengig av hvordan du bruker den. Generelt brukes den merkede bindingen til å velge og avmarkere HTML-kontrollerbare formelementer: avmerkingsbokser og radioknapper.

    Enkle sjekkbokser

    La oss starte med en enkel merketrute:

     
    Angre meg med spesielle tilbud:

    Dette legger til et avkrysningsboks i skjemaet og kobler det til irriter meg egenskapen til ViewModel. Som alltid er dette en toveisforbindelse. Når brukeren velger eller avmarkerer boksen, oppdaterer Knockout.js ViewModel, og når du angir verdien av egenskapen ViewModel, oppdaterer den visningen. Ikke glem å definere annoyMe observerbar:

     this.annoyMe = ko.observable (true);

    Bruker sjekket bindende på denne måten er som å skape et ett-til-ett forhold mellom en enkelt boks og en boolsk observerbar.

    Figur 22: Koble til en boolsk observerbar med en enkelt boks

    Kryss-bokser

    Det er også mulig å bruke sjekket bindende med arrays. Når du binder en avmerkingsboks til et observerbart array, svarer de valgte boksene til elementene som finnes i arrayet, som vist i følgende figur:

    Figur 23: Koble til en observerbar rekkefølge med flere boksene

    For eksempel vurdere følgende observerbare:

    this.annoyTimes = ko.observableArray (['morgen', 'kveld']);

    Vi kan koble elementene i dette observerbare arrayet til boksene ved hjelp av verdi attributt på hver element:

     
    Angre meg med spesielle tilbud:

    Dette bruker irriter meg eiendom fra forrige leksjon for å bytte en liste over boksene for å velge når det ville være en god tid å bli irritert. Siden verdi = 'morgen' er på den første avkrysningsboksen, vil den bli valgt når "morgen" strengen er i annoyTimes array. Det samme gjelder for de andre boksene. "morgen" og "kveld" er det første innholdet i arrayet, så du bør se noe som følger på websiden din:

    Figur 24: Kryss av bokser som viser startstatusen til annoyTimes observerbar rekkefølge

    Og siden vi bruker en observer array, forbindelsen er toveis-avvelger noen av boksene vil fjerne den tilsvarende strengen fra annoyTimes matrise.

    Radio knapper

    Den siste konteksten for sjekket binding er i en radioknapp gruppe. I stedet for en boolsk eller en matrise, kobler radioknappene sine verdi Tilordne en strengegenskap i ViewModel. For eksempel kan vi slå avmerkingsboksen til en radioknappgruppe ved først å endre annoyTimes observerbar til en streng:

     this.annoyTimes = ko.observable ('morning');

    Så, alt vi trenger å gjøre er å slå elementer i radioknapper:

    Hver burde "radio" som sin type og "annoyGroup" som sitt navn. Sistnevnte har ikke noe å gjøre med Knockout.js-det legger bare alle sammen til samme HTML-radioknappgruppe. Nå blir verdien til den valgte alternativknappen alltid lagret i annoyTimes-egenskapen.

    Figur 25: Koble til en observerbar streng med flere radioknapper

    De opsjoner binding

    De opsjoner bindende definerer innholdet i a felt med:

    Du bør nå ha en rullegardinliste i stedet for en radioknappgruppe, men det er ikke bruk å ha en slik liste hvis du ikke kan finne ut hvilket element som er valgt. For dette kan vi gjenbruke verdi bindende fra tidligere i leksjonen:

    Dette bestemmer hvilken egenskap på ViewModel inneholder den valgte strengen. Vi trenger fortsatt å definere denne egenskapen:

     this.selectedTime = ko.observable ('På ettermiddagen');

    Igjen, dette forholdet går begge veier. Angir verdien av selectedTime vil endre det valgte elementet i rullegardinlisten, og omvendt.

    Bruk objekter som alternativer

    Kombinere alternativene og verdien bindinger gir deg alle verktøyene du trenger for å arbeide med rullegardinlister som inneholder strenger. Men det er ofte mye enklere å velge hele JavaScript-objektene ved hjelp av en rullegardinliste. For eksempel definerer følgende en liste over produkter som minner om forrige leksjon:

     this.products = ko.observableArray ([navn: 'Øl', pris: 10.99, navn: 'Brats', pris: 7.99, navn: 'Boller', pris: 2,99]);

    Når du prøver å lage en element:

    For at denne utklippet skal fungere, må du også definere en favoriteProduct observerbar på ViewModel. Knockout.js vil fylle denne egenskapen med en gjenstand fra PersonViewModel.products-ikke en streng som den gjorde i forrige seksjon.

    De selectedOptions binding

    Den andre gjengivelsesmuligheten for HTML

    De størrelse Attributt definerer antall synlige alternativer, og multippel = 'sann' gjør det til en flervalgsliste. I stedet for en strengegenskaper bør favorittProdukter vise til en matrise:

     var brats = navn: 'Brats', pris: 7.99; this.products = ko.observableArray ([navn: 'Øl', pris: 10.99, brats, navn: 'Boller', pris: 2,99]); this.favoriteProducts = ko.observableArray ([brats]);

    Merk at vi trengte å gi samme objektreferanse (brats) til begge Produkter og favorittProdukter for Knockout.js for å initialisere valget riktig.

    De hasfocus binding

    Og så kommer vi til vår endelige interaktive binding: hasfocus. Denne passende navnet bindingen lar deg manuelt sette fokus på et interaktivt element ved hjelp av en ViewModel-egenskap. Hvis du for en eller annen merkelig grunn vil at feltet "Primær telefon" skal være det første fokuset, kan du legge til en hasfokus-binding, slik som:

     
     Hoved telefon:

    Deretter kan du legge til en boolsk observerbar å fortelle Knockout.js for å gi det fokus:

     this.phoneHasFocus = ko.observable (true);

    Ved å sette denne eiendommen andre steder i søknaden din, kan du nøyaktig styre strømmen av fokus i skjemaene dine. I tillegg kan du bruke hasfocus å spore brukerens fremdrift gjennom flere skjemafelter.

    Sammendrag

    Denne leksjonen dekket interaktive bindinger, som utnytter Knockout.js 'automatisk avhengighetssporing mot HTMLs skjemafelter. I motsetning til utseende bindinger, er interaktive bindinger toveis bindinger - endringer i brukergrensesnittkomponentene blir automatisk reflektert i ViewModel, og oppgaver til ViewModel-egenskaper utløser Knockout.js for å oppdatere visningen tilsvarende.

    Interaktive bindinger, utseende bindinger og kontroll-flyt bindinger komponere Knockout.js 'templerende verktøykasse. Deres felles mål er å gi et datasentrisk grensesnitt for dine webapplikasjoner. Når du definerer presentasjonen av dataene dine ved hjelp av disse bindingene, er alt du trenger å bekymre deg for å manipulere den underliggende ViewModel. Dette er en mye mer robust måte å utvikle dynamiske webapplikasjoner på.

    Denne leksjonen diskuterte skjemaer fra perspektivet til visningen og ViewModel. Interaktive bindinger er en intuitiv, skalerbar metode for å få tilgang til brukerinngang, men vi har ennå ikke diskutert hvordan du får disse dataene ut av fronten og inn i et server-side script. Den neste leksjonen løser dette problemet ved å integrere Knockout.js med jQuery's AJAX-funksjonalitet.

    Denne leksjonen representerer et kapittel fra Knockout Succinctly, en gratis eBok fra teamet på Syncfusion.

    Kode
    ×