Accentsconagua

Interactieve bindingen

Code
Share

Formulierelementen zijn de conventionele manier om via een webpagina met gebruikers te communiceren. Het werken met formulieren in Knockout.js is ongeveer hetzelfde als werken met uiterlijk-bindingen. Maar aangezien gebruikers formuliervelden kunnen bewerken, beheert Knockout.js updates in beide richtingen. Dit betekent dat interactieve bindingen zijn tweezijdig. Ze kunnen programmatisch worden ingesteld en de weergave wordt dienovereenkomstig bijgewerkt, of ze kunnen door de weergave worden ingesteld en programmatisch worden gelezen.

Figuur 19: Knockout.js brengt veranderingen in beide richtingen voort

U kunt bijvoorbeeld de waarde van een tekstinvoerveld instellen vanuit het ViewModel en dit wordt weergegeven in de weergave. Maar de gebruiker die iets in het invoerveld typt, zorgt ervoor dat de bijbehorende eigenschap op het ViewModel ook wordt bijgewerkt. Het punt is, Knockout.js zorgt er altijd voor dat de weergave en het ViewModel worden gesynchroniseerd.

Knockout.js bevat 11 bindingen voor interactie met de gebruiker:

  • Klik: -Roep een ViewModel-methode op wanneer op het element wordt geklikt.
  • waarde: -Koppel de waarde van een formulierelement aan een ViewModel-eigenschap.
  • evenement: -Roep een methode op wanneer een door de gebruiker geïnitieerde gebeurtenis plaatsvindt.
  • voorleggen: -Roep een methode op wanneer een formulier wordt ingediend.
  • in staat stellen: -Schakel een formulierelement in op basis van een bepaalde voorwaarde.
  • onbruikbaar maken: -Schakel een formulierelement uit op basis van een bepaalde voorwaarde.
  • gecontroleerd: -Koppel een keuzerondje of selectievakje aan een ViewModel-eigenschap.
  • opties: -Definieer een veld-.
  • hasfocus: -Bepaal of het element gefocust is of niet.

    • Net als de uiterlijkbindingen die in de vorige les zijn gepresenteerd, zijn deze allemaal gedefinieerd in het kenmerk data-binding van een HTML-element. Sommigen van hen (zoals de Klik binding) werken op elk element, maar andere (zoals gecontroleerd) kunnen alleen met specifieke elementen worden gebruikt.

    Een van de belangrijkste voordelen van het gebruik van Knockout.js om HTML-formulieren te beheren, is dat jij nog steeds alleen zorgen te maken over de gegevens. Wanneer de gebruiker de waarde van een formulierelement wijzigt, geeft uw ViewModel de update automatisch weer. Dit maakt het zeer eenvoudig om gebruikersinvoer te integreren in de rest van uw applicatie.

    Een HTML-formulier

    In deze les wordt een nieuwe HTML-pagina gebruikt voor het actieve voorbeeld. In plaats van een weergavepagina van een winkelwagentje, werken we met een registratieformulier voor nieuwe klanten. Maak een nieuw HTML-bestand met de naam interactieve-bindings.html en voeg het volgende toe:

       Interactieve bindingen

    Dit is een vereenvoudigde versie van waar we in de serie mee hebben gewerkt. In deze les maken we ons alleen zorgen over configureren vormelementen. Het verwerken van formulierinzendingen blijft staan ​​voor de volgende les.

    De Klik Verbindend

    De klikbinding is een van de eenvoudigste interactieve bindingen. Het roept gewoon een methode van je ViewModel aan wanneer de gebruiker op het element klikt. Voeg bijvoorbeeld de volgende knop toe aan de binnenkant van de

    element:

    Wanneer de gebruiker op de knop klikt, roept Knockout.js de saveUserData () methode op PersonViewModel. Bovendien geeft het twee parameters door aan de handlermethode: het huidige model en de DOM-gebeurtenis. Een saveUserData () -methode die beide parameters gebruikt, ziet er ongeveer zo uit:

     this.saveUserData = function (model, event) alert (model.firstName () + "probeert te betalen!"); if (event.ctrlKey) alert ("Hij hield de Control-toets om de een of andere reden ingedrukt."); ;

    In dit specifieke voorbeeld, model- verwijst naar de ViewModel-instantie op het hoogste niveau en evenement is de DOM-gebeurtenis veroorzaakt door de klik van de gebruiker. Het modelargument is altijd de stroom ViewModel, waarmee het mogelijk is toegang te krijgen tot individuele lijstitems in een foreach-lus. Dit is hoe we de methode removeProduct () in Les 3 hebben geïmplementeerd:.

    De waarde Verbindend

    De waarde-binding lijkt sterk op de tekstbinding die we in deze serie hebben gebruikt. Het belangrijkste verschil is dat het kan worden gewijzigd door de gebruiker, en het ViewModel wordt dienovereenkomstig bijgewerkt. We kunnen bijvoorbeeld het Voornaam en achternaam observables met een invoerveld door de volgende HTML toe te voegen aan het formulier (vóór de

    De behandelmethoden moeten er ongeveer als volgt uitzien:

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

    klikken Weergavenaam leest de ViewModel's Voornaam eigenschap, die overeen zou moeten komen met de element, zelfs als het door de gebruiker is bewerkt. De Stel naam in knop stelt de waarde van de eigenschap ViewModel in, waardoor de element om bij te werken. Het gedrag van de laatste is in wezen hetzelfde als een normale tekstbinding.

    Nogmaals, het hele punt achter deze synchronisatie in twee richtingen is om u te laten concentreren op uw gegevens. Nadat u een waarde bindend, kunt u HTML-formulierelementen volledig vergeten. Gewoon de bijbehorende eigenschap ophalen of instellen op het ViewModel en Knockout.js verzorgt de rest.

    We hebben de. Niet nodig Weergavenaam en setName-methoden of de bijbehorende knoppen, zodat u ze kunt verwijderen en desgewenst kunt verwijderen.

    De evenement Verbindend

    De evenement Met binding kunt u luisteren naar willekeurige DOM-gebeurtenissen op elk HTML-element. Het is als een generieke versie van de Klik verbindend. Maar omdat het voor meerdere gebeurtenissen kan luisteren, heeft het een object nodig om gebeurtenissen aan werkwijzen toe te wijzen (dit is vergelijkbaar met de parameter attr binding). We kunnen bijvoorbeeld luisteren naar mouseover- en mouseout-gebeurtenissen op de eerste element met de volgende:

     
     Voornaam:

    Wanneer de gebruiker een a vuurt mouseover evenement, Knockout.js noemt het toon details() methode van ons ViewModel. Evenzo, als hij of zij het element verlaat, wordt hideDetails () aangeroepen. Beide hebben dezelfde parameters als de handlers van de click-binding: het doelwit van de gebeurtenis en het gebeurtenisobject zelf. Laten we deze methoden nu implementeren:

     this.showDetails = functie (doel, gebeurtenis) alert ("Muis over"); ; this.hideDetails = function (target, event) alert ("Mouse out"); ;

    Nu, wanneer u interactie hebt met de Voornaam veld, zou u beide berichten moeten zien verschijnen. Maar in plaats van alleen een waarschuwingsbericht weer te geven, laten we wat extra informatie zien voor elk formulierveld wanneer de gebruiker eroverheen rolt. Hiervoor hebben we nog een waarneming nodig PersonViewModel:

     this.details = ko.observable (false);

    De gegevens property fungeert als een toggle, die we kunnen in- en uitschakelen met onze event handler-methoden:

     this.showDetails = function (target, event) this.details (true); ; this.hideDetails = function (target, event) this.details (false); ;

    Dan kunnen we de schakelaar combineren met de zichtbaar bindend om formuliervelddetails te tonen of te verbergen in de weergave:

     
     Voornaam:  Je voornaam

    De inhoud van de moet verschijnen wanneer u met de muis over de Voornaam veld en verdwijnen wanneer je de muis eruit haalt. Dit komt vrij dicht in de buurt van onze gewenste functionaliteit, maar de zaken worden ingewikkelder zodra we details voor meer dan één formulierveld willen weergeven. Omdat we maar één toggle-variabele hebben, is het weergeven van details een alles-of-niets-propositie - waarvoor details worden weergegeven allemaal van de velden, of voor geen van hen.

    Afbeelding 21: Alle formuliervelddetails tegelijkertijd omwisselen

    Een manier om dit te verhelpen is door een aangepaste parameter door te geven aan de handlerfunctie.

    Event-handlers met aangepaste parameters

    Het is mogelijk om aangepaste parameters uit de weergave door te geven aan de gebeurtenishandler. Dit betekent dat u vanuit het beeld willekeurige informatie kunt openen in het ViewModel. In ons geval gebruiken we een aangepaste parameter om aan te geven in welk formulierveld de details moeten worden weergegeven. In plaats van een schakelaar, de gegevens waarneembaar bevat een tekenreeks die het geselecteerde element vertegenwoordigt. Eerst maken we een paar kleine wijzigingen in het ViewModel:

     this.details = ko.observable (""); this.showDetails = function (target, event, details) this.details (details);  this.hideDetails = function (target, event) this.details ("");

    De enige grote verandering hier is de toevoeging van a gegevens parameter naar de toon details() methode. We hebben geen aangepaste parameter nodig voor de functie hideDetails (), omdat alleen de details zichtbaar worden gemaakt.

    Vervolgens gebruiken we een letterlijke functie in de evenement binding om de aangepaste parameter door te geven aan showDetails ():

    De functie letterlijk voor mouseover is een verpakking voor ons toon details() handler, een eenvoudig middel om extra informatie door te geven. De mouseout-handler blijft ongewijzigd. Ten slotte moeten we het met de details:

     Je voornaam

    De Voornaam in het formulierveld moet de gedetailleerde beschrijving worden weergegeven wanneer u de muisaanwijzer plaatst en verbergt wanneer u de muis eruit haalt, net zoals in het vorige gedeelte. Alleen nu is het mogelijk om details toe te voegen aan meer dan één veld door de aangepaste parameter te wijzigen. U kunt bijvoorbeeld details voor de Achternaam invoerelement met:

     
     Achternaam:  Jouw achternaam

    Gebeurtenisbindingen kunnen een beetje ingewikkeld zijn om in te stellen, maar als je eenmaal begrijpt hoe ze werken, bieden ze onbegrensde mogelijkheden voor reactief ontwerpen. De evenement binding kan zelfs verbinding maken met de animatiefunctionaliteit van jQuery, die wordt besproken in les 8 :. Voor nu zullen we de rest van de interactieve bindingen van Knockout.js voltooien. Gelukkig voor ons is geen van hen bijna net zo ingewikkeld als het binden van gebeurtenissen.

    De / uit te schakelen Bindingen

    De in staat stellen en onbruikbaar maken bindingen kunnen worden gebruikt om formuliervelden in of uit te schakelen op basis van bepaalde voorwaarden. Stel dat u bijvoorbeeld een primair en een secundair telefoonnummer voor elke gebruiker wilde opnemen. Deze kunnen worden opgeslagen als normale waarneembare gegevens op PersonViewModel:

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

    De observeerbare primaryPhone kan worden gekoppeld aan een formulierveld met een normaal waarde verbindend:

     
     Vaste telefoon:

    Het heeft echter weinig zin om een ​​secundair telefoonnummer in te voeren zonder een primair telefoonnummer op te geven, dus we activeren het alleen voor het secundaire telefoonnummer als de primaire telefoon niet leeg is:

     
     Secundaire telefoon:

    Gebruikers kunnen nu alleen communiceren met de Secundaire telefoon veld als ze een waarde hebben ingevoerd voor Vaste telefoon. De onbruikbaar maken binding is een handige manier om de conditie te ontkennen, maar werkt verder precies zoals inschakelen.

    De gecontroleerd Verbindend

    gecontroleerd is een veelzijdige binding die verschillende gedragingen vertoont, afhankelijk van hoe je het gebruikt. Over het algemeen wordt de gecontroleerde binding gebruikt om HTML's te selecteren en te de-selecteren: selectievakjes en keuzerondjes.

    Eenvoudige selectievakjes

    Laten we beginnen met een eenvoudig selectievakje:

     
    Annoy me met speciale aanbiedingen:

    Dit voegt een selectievakje toe aan ons formulier en koppelt het aan het annoyMe eigendom van het ViewModel. Zoals altijd is dit een tweerichtingsverbinding. Wanneer de gebruiker de box selecteert of deselecteert, werkt Knockout.js het ViewModel bij en wanneer u de waarde van de ViewModel-eigenschap instelt, wordt de weergave bijgewerkt. Vergeet niet om de annoyMe waarneembaar te definiëren:

     this.annoyMe = ko.observable (true);

    De ... gebruiken gecontroleerd binding op deze manier is als het creëren van een één-op-één-relatie tussen een enkel selectievakje en een Booleaanse waarneembare.

    Afbeelding 22: een Boolean-waarneembaar verbinden met een enkel selectievakje

    Check-box-arrays

    Het is ook mogelijk om de. Te gebruiken gecontroleerd binden met arrays. Wanneer u een selectievakje aan een waarneembare array koppelt, komen de geselecteerde vakken overeen met elementen in de array, zoals weergegeven in de volgende afbeelding:

    Figuur 23: Een waarneembare array verbinden met meerdere selectievakjes

    Beschouw bijvoorbeeld het volgende waarneembaar:

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

    We kunnen de items in deze waarneembare array verbinden met selectievakjes met behulp van de waarde attribuut op elk element:

     
    Annoy me met speciale aanbiedingen:

    Dit gebruikt de annoyMe eigenschap uit de vorige les om een ​​lijst met selectievakjes in te schakelen om te selecteren wanneer het een goed moment zou zijn om geïrriteerd te zijn. Sinds value = 's morgens' bevindt zich bij het eerste selectievakje, deze wordt telkens wanneer geselecteerd "ochtend" string bevindt zich in de array annoyTimes. Hetzelfde geldt voor de andere selectievakjes. "morning" en "evening" zijn de initiële inhoud van de array, dus u zou iets als het volgende in uw webpagina moeten zien:

    Afbeelding 24: Selectievakjes die de begintoestand van de server weergeven annoyTimes waarneembare array

    En omdat we een gebruiken waarneembaar array, de verbinding is tweerichtings-deselecterend, een van de vakken zal de corresponderende string verwijderen uit de annoyTimes rangschikking.

    Radio knoppen

    De laatste context voor de gecontroleerd binding bevindt zich in een groep met keuzerondjes. In plaats van een Boolean of een array, verbinden de radioknoppen hun waarde attribuut aan een tekenreekseigenschap in het ViewModel. We kunnen bijvoorbeeld onze check-box array veranderen in een groep keuzerondjes door eerst de waarneembare annoyTimes in een string te veranderen:

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

    Alles wat we moeten doen is dan de elementen in keuzerondjes:

    Elk zou moeten hebben "radio" als zijn type en "annoyGroup" als zijn naam. De laatste heeft niets te maken met Knockout.js - het voegt ze allemaal toe aan dezelfde groep HTML-radioknoppen. Nu wordt het waardekenmerk van het geselecteerde keuzerondje altijd opgeslagen in de eigenschap annoyTimes.

    Figuur 25: Een waarneembare string verbinden met meerdere keuzerondjes

    De opties Verbindend

    De opties binding definieert de inhoud van a veld met:

    U zou nu een vervolgkeuzelijst moeten hebben in plaats van een keuzerondjesgroep, maar het heeft geen zin om zo'n lijst te hebben als u niet kunt achterhalen welk item is geselecteerd. Hiervoor kunnen we het waarde binding van eerder in de les:

    Dit bepaalt welke eigenschap op het ViewModel de geselecteerde reeks bevat. We moeten deze eigenschap nog steeds definiëren:

     this.selectedTime = ko.observable ('In the afternoon');

    Nogmaals, deze relatie is in beide richtingen. De waarde van instellen selectedTime zal het geselecteerde item in de vervolgkeuzelijst wijzigen en omgekeerd.

    Objecten gebruiken als opties

    Het combineren van de opties en de waardebindingen geeft u alle hulpmiddelen die u nodig hebt om te werken met vervolgkeuzelijsten die strings bevatten. Het is echter vaak handiger om volledige JavaScript-objecten te selecteren met behulp van een vervolgkeuzelijst. Het volgende definieert bijvoorbeeld een lijst met producten die doen denken aan de vorige les:

     this.products = ko.observableArray ([name: 'Beer', prijs: 10.99, naam: 'Brats', prijs: 7.99, naam: 'Buns', prijs: 2.99]);

    Wanneer u probeert een te maken element:

    Om dit fragment te laten werken, moet u ook een definiëren favoriteProduct waarneembaar op uw ViewModel. Knockout.js zal deze eigenschap vullen met een voorwerp van PersonViewModel.products, geen tekenreeks zoals in de vorige sectie.

    De selectedOptions Verbindend

    De andere weergavemogelijkheid voor HTML's

    De grootte attribuut definieert het aantal zichtbare opties, en meervoudige = 'true' verandert het in een multi-select-lijst. In plaats van een tekenreekseigenschap moeten favoriete producten verwijzen naar een array:

     var brats = name: 'Brats', prijs: 7.99; this.products = ko.observableArray ([name: 'Beer', prijs: 10.99, brats, name: 'Buns', prijs: 2.99]); this.favoriteProducts = ko.observableArray ([brats]);

    Merk op dat we dezelfde objectreferentie moesten opgeven (snotapen) aan beide producten en favorieteProducten voor Knockout.js om de selectie correct te initialiseren.

    De hasfocus Verbindend

    En zo komen we bij onze laatste interactieve binding: hasfocus. Met deze toepasselijk benoemde binding kunt u handmatig de focus van een interactief element instellen met behulp van een ViewModel-eigenschap. Als u om een ​​of andere rare reden wilt dat het veld 'Primaire telefoon' de eerste focus is, kunt u een hasfocus-binding toevoegen, zoals:

     
     Vaste telefoon:

    Dan kun je een Booleaanse waarneming toevoegen om Knockout.js te vertellen om het te focussen:

     this.phoneHasFocus = ko.observable (true);

    Door deze eigenschap ergens anders in uw toepassing in te stellen, kunt u nauwkeurig de stroom van focus in uw formulieren regelen. Bovendien kunt u gebruiken hasfocus om de voortgang van de gebruiker bij te houden door middel van meerdere formuliervelden.

    Samenvatting

    Deze les ging over interactieve bindingen, die gebruikmaken van de automatische afhankelijkheidscontrole van Knockout.js op de formuliervelden van HTML. Anders dan uiterlijk bindingen, interactieve bindingen zijn tweezijdig bindings-wijzigingen in de componenten van de gebruikersinterface worden automatisch weergegeven in het ViewModel, en toewijzingen aan ViewModel-eigenschappen activeren Knockout.js om de weergave dienovereenkomstig bij te werken.

    Interactieve bindingen, uiterlijk bindingen en controle-flow bindingen vormen Knockout.js 'templating toolkit. Hun gemeenschappelijke doel is om een ​​datacentrische interface te bieden voor uw webapplicaties. Zodra u de presentatie van uw gegevens met behulp van deze bindingen definieert, hoeft u zich alleen zorgen te maken over het manipuleren van het onderliggende ViewModel. Dit is een veel robuustere manier om dynamische webtoepassingen te ontwikkelen.

    In deze les werden vormen besproken vanuit het perspectief van het beeld en het ViewModel. Interactieve bindingen zijn een intuïtieve, schaalbare methode voor toegang tot gebruikersinvoer, maar we moeten nog bespreken hoe deze gegevens uit de front-end en in een server-side script kunnen worden gehaald. In de volgende les wordt dit probleem verholpen door Knockout.js te integreren met de AJAX-functionaliteit van jQuery.

    Deze les vertegenwoordigt een hoofdstuk van Knockout bondig, een gratis eBoek van het team van Syncfusion.

    Code
    ×