Accentsconagua

Interaktiva bindningar

Koda
Share

Formelement är det vanliga sättet att interagera med användare via en webbsida. Att arbeta med formulär i Knockout.js är ungefär detsamma som att arbeta med utseendebindningar. Men eftersom användare kan redigera formulärfält hanterar Knockout.js uppdateringar i båda riktningarna. Detta innebär att interaktiva bindningar är tvåvägs. De kan ställas in programmatiskt och vyn uppdateras i enlighet med detta, eller De kan ställas in av vyn och läsa programmatiskt.

Figur 19: Knockout.js förökar ändringar i båda riktningarna

Du kan till exempel ställa in värdet på ett textfält från ViewModel och det visas i vyn. Men användaren som skriver något i inmatningsfältet gör att den tillhörande egenskapen på ViewModel uppdateras också. Poängen är att Knockout.js alltid ser till att vyn och ViewModel synkroniseras.

Knockout.js innehåller 11 bindningar för att interagera med användaren:

  • klick: -Ring en ViewModel-metod när elementet är klickat.
  • värde: -Länk ett formelements värde till en ViewModel-egenskap.
  • händelse: -Ring en metod när en händelse som initieras av användaren inträffar.
  • lämna: -Ring en metod när en blankett skickas in.
  • Gör det möjligt: -Aktivera ett formulärelement baserat på ett visst villkor.
  • inaktivera: -Inaktivera ett formulärelement baserat på ett visst villkor.
  • kontrollerade: -Länk en radioknapp eller kryssrutan till en ViewModel-egenskap.
  • alternativ: -Definiera a fält.
  • hasfocus: -Ange om elementet är inriktat eller inte.

    • Liksom de utseendebindningar som presenterades i den tidigare lektionen definieras alla dessa i ett bindningsattribut för ett HTML-element. Några av dem (som klick bindande) arbete på något element, men andra (som kontrollerat) kan endast användas med specifika element.

    En av de största fördelarna med att använda Knockout.js för att hantera HTML-formulär är det du fortfarande behöver bara oroa sig för data. När användaren ändrar ett formelements värde, reflekterar din ViewModel automatiskt uppdateringen. Det gör det väldigt lätt att integrera användarinmatning i resten av din ansökan.

    En HTML-blankett

    Denna lektion använder en ny HTML-sida för det körande exemplet. I stället för en kundvagnssida visas vi med ett registreringsformulär för nya kunder. Skapa en ny HTML-fil som heter interaktiva-bindings.html och lägg till följande:

       Interaktiva bindningar

    Detta är en förenklad version av vad vi har arbetat med i hela serien. I den här lektionen kommer vi bara att oroa oss konfigurering formelement. Behandling av formulärinsändningar lämnas till nästa lektion.

    De klick Bindning

    Klickbindningen är en av de enklaste interaktiva bindningarna. Det ringer bara en metod för din ViewModel när användaren klickar på elementet. Till exempel lägg till följande knapp inuti

    element:

    När användaren klickar på knappen, kallar Knockout.js saveUserData () metod på PersonViewModel. Dessutom skickas det två parametrar till hanteringsmetoden: den aktuella modellen och DOM-händelsen. En saveUserData () metod som använder båda dessa parametrar skulle se ut som:

     this.saveUserData = funktion (modell, händelse) alert (model.firstName () + "försöker checka ut!"); om (event.ctrlKey) alert ("Han höll ner kontrollnyckeln av någon anledning."); ;

    I detta speciella exempel, modell refererar till den översta ViewModel-förekomsten, och händelse är DOM-händelsen trigget av användarens klick. Modellen argumentet kommer alltid att vara nuvarande ViewModel, som gör det möjligt att få tillgång till enskilda listobjekt i en förloppsling. Så här genomförde vi metoden removeProduct () i lektion 3:.

    De värde Bindning

    Värdebindningen är mycket lik den textbindning vi har använt genom hela denna serie. Den viktigaste skillnaden är att den kan ändras av användare, och ViewModel uppdateras i enlighet med detta. Till exempel kan vi länka förnamn och efternamn observerbarhet med ett inmatningsfält genom att lägga till följande HTML i formuläret (före

    Hanteringsmetoderna ska se ut som följande:

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

    klick Visningsnamn kommer att läsa ViewModels förnamn egendom som borde matcha element, även om den har redigerats av användaren. De Ange namn knappen ställer in värdet på ViewModels egenskap, vilket orsakar element för att uppdatera. Beteendet hos sistnämnda är väsentligen detsamma som en normal textbindning.

    Återigen är hela poängen bakom denna tvåvägssynkronisering att du ska kunna fokusera på dina data. När du har ställt in en värde bindande, kan du helt glömma HTML-formelement. Hämta eller sätt bara den tillhörande egenskapen på ViewModel och Knockout.js tar hand om resten.

    Vi kommer inte behöva display och setName-metoder eller deras respektive knappar, så du kan fortsätta och radera dem om du vill.

    De händelse Bindning

    De händelse bindande låter dig lyssna på godtyckliga DOM-händelser på något HTML-element. Det är som en generisk version av klick bindning. Men eftersom det kan lyssna på flera händelser, krävs det ett syfte att kartlägga händelser till metoder (detta liknar attr-bindningsparametern). Till exempel kan vi lyssna på mouseover och mouseout händelser på den första element med följande:

     
     Förnamn:

    När användaren brinner a mouseover händelse, kallar Knockout.js visa detaljer() Metoden för vår ViewModel. På samma sätt när han eller hon lämnar elementet kallas hideDetails (). Båda dessa har samma parametrar som klickbindarens hanterare: målet för händelsen och händelseobjektet självt. Låt oss genomföra dessa metoder nu:

     this.showDetails = funktion (mål, händelse) alert ("Mouse over"); ; this.hideDetails = funktion (mål, händelse) alert ("Mouse out"); ;

    Nu när du interagerar med Förnamn fält bör du se båda meddelandena dyka upp. Men istället för att bara visa ett varningsmeddelande, låt oss visa lite extra information för varje formulärfält när användaren rullar över det. För detta behöver vi en annan observerbar på PersonViewModel:

     this.details = ko.observable (false);

    De detaljer egendom fungerar som en växel, som vi kan slå på och av med våra händelsehanteringsmetoder:

     this.showDetails = funktion (mål, händelse) this.details (true); ; this.hideDetails = funktion (mål, händelse) this.details (false); ;

    Då kan vi kombinera växeln med synlig bindande för att visa eller dölja formulärfältets detaljer i vyn:

     
     Förnamn:  Ditt förnamn

    Innehållet i ska visas när du musen över Förnamn fält och försvinna när du musen ut. Detta ligger ganska nära vår önskade funktionalitet, men saker blir mer komplicerade när vi vill visa detaljer för mer än ett formulärfält. Eftersom vi bara har en växelvariabel, är det en all-or-nothing-proposition som visar detaljer, antingen detaljer visas för Allt av fälten, eller för ingen av dem.

    Figur 21: Byter alla formulärfält detaljer samtidigt

    Ett sätt att åtgärda detta är genom att skicka en anpassad parameter till handlarfunktionen.

    Händelseshanterare med anpassade parametrar

    Det är möjligt att skicka anpassade parametrar från vyn i händelsehanteraren. Det betyder att du kan få tillgång till godtycklig information från vyn i ViewModel. I vårt fall använder vi en anpassad parameter för att identifiera vilket formulärfält som ska visa informationen. I stället för en växel, den detaljer observerbar kommer att innehålla en sträng som representerar det valda elementet. Först gör vi några små förändringar i ViewModel:

     this.details = ko.observable (""); this.showDetails = funktion (mål, händelse, detaljer) this.details (detaljer);  this.hideDetails = funktion (mål, händelse) this.details ("");

    Den enda stora förändringen här är tillägget av a detaljer parameter till visa detaljer() metod. Vi behöver inte en anpassad parameter för funktionen hideDetails () eftersom det bara rensar detaljerna observerbara.

    Därefter använder vi en funktion bokstavlig i händelse bindande för att skicka den anpassade parametern till showDetails ():

    Funktionen bokstavlig för mouseover är en omslag för vår visa detaljer() handler, vilket ger ett enkelt sätt att passera i extra information. Mouseout-handlaren förblir oförändrad. Slutligen måste vi uppdatera innehåller detaljerna:

     Ditt förnamn

    De Förnamn Formfältet ska visa sin detaljerade beskrivning när du musen över och döljer när du musen ut, precis som den gjorde i föregående avsnitt. Endast nu är det möjligt att lägga till detaljer i mer än ett fält genom att ändra den anpassade parametern. Till exempel kan du aktivera detaljer för Efternamn inmatningselement med:

     
     Efternamn:  Ditt efternamn

    Eventbindningar kan vara lite komplicerade att sätta upp, men när du förstår hur de fungerar möjliggör de obegränsade möjligheter för reaktiv design. De händelse bindning kan till och med ansluta till jQuerys animationsfunktionalitet, vilket diskuteras i lektion 8 :. För nu slutar vi utforska resten av Knockout.js interaktiva bindningar. Lyckligtvis för oss är ingen av dem nästan lika komplicerade som händelsebindningar.

    De aktivera inaktivera Bindningar

    De Gör det möjligt och inaktivera bindningar kan användas för att aktivera eller inaktivera formulärfält baserat på vissa villkor. Låt oss till exempel säga att du ville spela in ett primärt och ett sekundärt telefonnummer för varje användare. Dessa kan lagras som normala observables på PersonViewModel:

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

    PrimaryPhone-observerbara kan kopplas till ett formulärfält med en normal värde bindning:

     
     Primär Telefon:

    Det är dock inte så mycket meningsfullt att ange ett sekundärt telefonnummer utan att ange en primär, så vi aktiverar endast för sekundärt telefonnummer om primaryPhone inte är tomt:

     
     Sekundär telefon:

    Nu kan användarna bara kunna interagera med Sekundär telefon fält om de har angett ett värde för Primär Telefon. De inaktivera bindning är ett bekvämt sätt att negera tillståndet, men fungerar annars precis som möjligt.

    De kontrollerade Bindning

    kontrollerade är en mångsidig bindning som uppvisar olika beteenden beroende på hur du använder den. I allmänhet används den markerade bindningen för att markera och avmarkera HTML: s kontrollbara formulärelement: kryssrutor och radioknappar.

    Enkla kryssrutor

    Låt oss börja med en enkel kryssruta:

     
    Ångra mig med specialerbjudanden:

    Detta lägger till en kryssruta i vår formulär och länkar den till irritera mig egenskapen hos ViewModel. Som alltid är det en tvåvägsanslutning. När användaren väljer eller avmarkerar rutan uppdaterar Knockout.js ViewModel, och när du anger värdet för ViewModel-egenskapen uppdaterar den vyn. Glöm inte att definiera annoyMe observerbar:

     this.annoyMe = ko.observable (true);

    Använda kontrollerade bindande på detta sätt är som att skapa ett ett-till-ett förhållande mellan en enda kryssruta och en booleska observerbar.

    Figur 22: Ansluta en booleska observerbar med en enda kryssruta

    Checkbox Arrays

    Det är också möjligt att använda kontrollerade bindande med arrays. När du binder en kryssruta till en observerbar grupp motsvarar de valda rutorna elementen i arrayen, som visas i följande bild:

    Figur 23: Ansluta en observerbar grupp med flera kryssrutor

    Tänk på följande observerbara:

    this.annoyTimes = ko.observableArray (['morning', 'evening']);

    Vi kan koppla objekten i denna observerbara array till kryssrutor med hjälp av värde attribut på varje element:

     
    Ångra mig med specialerbjudanden:

    Detta använder irritera mig egendom från föregående lektion för att byta en lista med kryssrutor för att välja när det skulle vara en bra tid att vara irriterad. Eftersom value = 'morgon' är på den första kryssrutan kommer den att väljas när "morgon" strängen ligger i annoyTimes-arrayen. Detsamma gäller för de andra kryssrutorna. "morgon" och "kväll" är de ursprungliga innehållen i arrayen, så du borde se något på följande sätt på din webbsida:

    Figur 24: Kryssrutor som visar startläget för annoyTimes observerbar array

    Och eftersom vi använder en märkbar array, anslutningen är tvåvägs-avmarkera någon av rutorna tar bort motsvarande sträng från annoyTimes array.

    Radioknappar

    Det sista sammanhanget för kontrollerade bindning finns i en radioknappgrupp. I stället för en booleska eller en array, kopplar radioknappar deras värde attribut till en strängegenskap i ViewModel. Till exempel kan vi vrida rutan i rutan till en radioknappgrupp genom att först ändra annoyTimes observerbara för en sträng:

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

    Då är allt vi behöver göra att vända element i radioknappar:

    Varje borde ha "radio" som dess typ och "annoyGroup" som sitt namn. Den senare har ingenting att göra med Knockout.js-det lägger bara till dem alla till samma HTML-radioknappgrupp. Nu lagras värdet attributet för den valda alternativknappen alltid i egenskapen annoyTimes.

    Figur 25: Ansluta en observerbar sträng med flera radioknappar

    De alternativ Bindning

    De alternativ bindande definierar innehållet i a fält med:

    Du borde nu ha en rullgardinsmeny istället för en radioknappgrupp, men det är inte användbart att ha en sådan lista om du inte kan ta reda på vilket objekt som är valt. För detta kan vi återanvända värde bindande från tidigare i lektionen:

    Detta bestämmer vilken egenskap på ViewModel som innehåller den valda strängen. Vi behöver fortfarande definiera den här egenskapen:

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

    Återigen går detta förhållande på båda hållen. Ställ in värdet på selectedTime kommer att ändra det valda objektet i rullgardinslistan och vice versa.

    Använda objekt som alternativ

    Kombinera alternativen och värdet bindningar ger dig alla verktyg du behöver för att arbeta med listrutor som innehåller strängar. Men det är ofta mycket bekvämare att välja hela JavaScript-objekt med hjälp av en rullgardinslista. Till exempel definierar följande en lista över produkter som påminner om föregående lektion:

     this.products = ko.observableArray ([namn: "Öl", pris: 10.99, namn: "Brats", pris: 7.99, namn: "Bullar", pris: 2,99]);

    När du försöker skapa en element:

    För att detta utdrag ska fungera måste du också definiera en favoriteProduct observerbar på din ViewModel. Knockout.js kommer att fylla den här egenskapen med en objekt från PersonViewModel.products-inte en sträng som den gjorde i föregående avsnitt.

    De selectedOptions Bindning

    Den andra återgivningsmöjligheten för HTML: s

    De storlek attribut definierar antalet synliga alternativ, och multipel = 'true' gör det till en flervalslista. I stället för en strängegenskap bör favoritprodukter peka på en array:

     var brats = namn: 'Brats', pris: 7,99; this.products = ko.observableArray ([namn: "öl", pris: 10.99, brats, namn: "bullar", pris: 2,99]); this.favoriteProducts = ko.observableArray ([brats]);

    Observera att vi behövde tillhandahålla samma objektreferens (brats) Till båda Produkter och favoriteProducts för Knockout.js för att initiera valet korrekt.

    De hasfocus Bindning

    Och så kommer vi till vår slutliga interaktiva bindning: hasfocus. Med den här namnet bindande kan du manuellt ställa in fokus för ett interaktivt element med en ViewModel-egenskap. Om du av någon märklig anledning vill att fältet "Primär telefon" är det första fokuset, kan du lägga till en hasfocus-bindning, som så:

     
     Primär Telefon:

    Då kan du lägga till en Boolean observerbar för att berätta Knockout.js för att ge den fokus:

     this.phoneHasFocus = ko.observable (true);

    Genom att ställa in den här egenskapen någon annanstans i din ansökan kan du exakt styra flödet av fokus i dina formulär. Dessutom kan du använda hasfocus för att spåra användarens framsteg genom flera formulärfält.

    Sammanfattning

    Denna lektion omfattade interaktiva bindningar, vilket utnyttjar Knockout.js automatiska beroendeuppföljning mot HTML-formulärfälten. Till skillnad från utseende bindningar är interaktiva bindningar tvåvägs bindningar-ändringar i användargränssnittskomponenterna återspeglas automatiskt i ViewModel, och uppdrag till ViewModel-egenskaper utlöser Knockout.js för att uppdatera vyn i enlighet med detta..

    Interaktiva bindningar, utseendebindningar och kontrollflödesbindningar komponerar Knockout.js 'templerande verktygsverktyg. Deras gemensamma mål är att tillhandahålla ett datacentrisk gränssnitt för dina webbapplikationer. När du har definierat presentationen av dina data med dessa bindningar är allt du behöver oroa dig för att manipulera den underliggande ViewModel. Detta är ett mycket mer robust sätt att utveckla dynamiska webbapplikationer.

    I denna lektion diskuterades formulär ur perspektivet av vyn och ViewModel. Interaktiva bindningar är en intuitiv, skalbar metod för åtkomst till användarinmatning, men vi har ännu inte diskuterat hur man får dessa data ut från fronten och till ett serverns script. Nästa lektion tar upp problemet genom att integrera Knockout.js med jQuerys AJAX-funktionalitet.

    Denna lektion representerar ett kapitel från Knockout Succinctly, en gratis eBook från laget på Syncfusion.

    Koda
    ×