Werken met formulieren in Knockout.js

Formulieren zijn een integraal onderdeel van elke applicatie of webpagina, omdat het een van de middelen is waarmee we gebruikersgegevens native kunnen verkrijgen, waardoor het verwerken ervan een veel voorkomende taak is.
Knockout.js stelt ons in staat om met uw object te werken data-bind alle elementen waaruit een formulier kan bestaan, waardoor het mogelijk wordt om te valideren, gebeurtenissen te activeren, waarneembare zaken toe te wijzen, enz. Dit maakt formulierverwerking aan de clientzijde werkbaar en daarom voegen we een extra laag validaties toe voordat deze de serverzijde bereikt.
VereistenWe hoeven alleen maar te hebben Knockout.js in ons systeem en toegankelijk voor de applicaties die we gaan maken, machtigingen om bestanden te schrijven, een internetverbinding om de bibliotheken te verkrijgen als we ze niet hebben, en een teksteditor zoals Sublieme tekst of Kladblok ++. Om de applicaties uit te voeren, hebben we een webservertype nodig Apache of Nginx in onze testomgeving.
Voordat we verder gaan met voorbeelden met gevallen die we kunnen toepassen, is het erg belangrijk om de data-binds die kunnen werken met de elementen van de vorm van onze applicatie, op deze manier kunnen we een idee krijgen van wat we wel en niet kunnen bereiken, vooral de manieren waarop we de resultaten kunnen krijgen die we nodig hebben om onze applicatie goed te laten werken:
DatabindwaardeDit wordt gebruikt in de waarden of selectie-invoerelementen, dit kunnen de invoer-, tekstgebied- of selectie-elementen zijn, hiermee kunnen we de waarde van het element vastleggen op het moment dat we het moeten gebruiken.
Data-bind tekstinvoerOosten verbindend wordt gebruikt met de input- en textarea-elementen, de functie is vergelijkbaar met: waarde Als we er echter een waarneembaarheid aan toewijzen, kunnen we de waarden vastleggen terwijl de gebruiker interactie heeft met het element, in tegenstelling tot waarde die ons de waarde geeft wanneer het element verandert, bijvoorbeeld wanneer het de focus verliest.
Gegevensbinding aangevinktHet wordt gebruikt met elementen van het type selectievakje Y Radio knoppenZoals de naam al aangeeft, stelt het ons in staat om vast te stellen of te weten of een element is geselecteerd in een structuur die de genoemde elementen gebruikt.
Opties voor gegevensbindenDoor dit te gebruiken verbindend We kunnen een select element vullen met de opties die het in het formulier zal weergeven, het is perfect wanneer we dynamisch een catalogus van opties willen maken.
Data-bind geselecteerdOptiesOok exclusief voor het select-element, het wordt gebruikt wanneer we de geselecteerde opties moeten instellen bij het instellen van de eigenschap multi, omdat we meer dan één optie tegelijk moeten kiezenz.
Gegevensbinding inschakelen / uitschakelenHet stelt ons in staat om elk van de verschillende elementen van het formulier in of uit te schakelen, hiermee kunnen we een element verwijderen als het niet nodig is om het in de applicatiestroom te gebruiken onder een bepaalde voorwaarde, waar inschakelen dient om in te schakelen en uitzetten om uit te schakelen, voor het geval we de betekenis van elk woord niet weten.
De meest interessante hiervan data-binds is dat ze op twee manieren werken, dat wil zeggen, wanneer er een wijziging is in een element, kunnen we het in onze modelweergave ontvangen en indien nodig enige verwerking uitvoeren, maar ook als we een waarneembaar kenmerk hebben en we iets willen doen vanuit de applicatie naar de vorm kunnen we ook zonder enig probleem, zolang we de . gebruiken data-bind geschikt voor het type vormelement, aangezien Knockout.js het zal foutieve instructies niet interpreteren zoals een browser met code zou kunnen doen HTML.
Laten we nu een praktisch voorbeeld bekijken van hoe we alle concepten kunnen gebruiken waar we het in het vorige gedeelte van deze tutorial over hebben gehad. We gaan een element van type maken tekstgebied dat het slechts 140 tekens zal accepteren, aangezien deze beperking bestaat, moeten we de gebruiker informeren hoeveel tekens hij nog heeft terwijl hij schrijft.
De logica die we zullen gebruiken is heel eenvoudig, we gaan de data-bind tekstinvoer in het textarea-element van ons formulier, dan gaan we het in onze modelweergave instellen als waarneembaar, en dus kunnen we beginnen met het vastleggen van de tekens terwijl de gebruiker typt. Ten slotte gebruiken we een element berekend Om een ​​waarneembare composiet te maken met het totaal van de resterende tekens, gaan we de gebruiker op dit moment niet dwingen om minder te schrijven, we informeren hem alleen over de tekens. Laten we eens kijken naar de code voor ons voorbeeld:

 Formulieren in knockout.js
Voer een tekst in

Overgebleven karakters: 

Opgemerkt moet worden dat we geen gebruik maken van de data-bindwaarde omdat we de wijziging van het aantal resterende tekens nodig hebben op het moment dat de gebruiker typt, want als dat niet het geval is, kunnen we alleen het aantal aangeven op het moment dat het naar een ander element gaat en dat zou niet optimaal zijn voor wat we targeten bij het gebruik Knockout.jsEr zullen echter gevallen zijn waarin dit soort gedrag nodig is, het hangt allemaal af van wat onze applicatie nodig heeft. Laten we dus eens kijken hoe ons voorbeeld eruitziet wanneer we het in de browser uitvoeren:

Natuurlijk kunnen we hier niet dynamisch zien hoe onze teller naar beneden gaat, maar wanneer we onze teller van resterende tekens schrijven, wordt deze bijgewerkt zoals deze is geschreven in het textarea-element van het formulier:

Een ander aspect dat we vaak nodig hebben in onze applicaties bij het werken met formulieren, zijn gebeurtenissen, omdat we hiermee acties kunnen activeren wanneer de gebruiker iets in het bijzonder doet, zoals een klik, of de muis over een specifiek gedeelte van ons HTML. Laten we eens kijken naar enkele van de gebeurtenissen die we in onze formulieren kunnen gebruiken:
Evenement indienenDeze gebeurtenis kan alleen worden gebruikt in het element het formulier, en het wordt geactiveerd op het moment dat de gebruiker het formulier naar de server verzendt, hetzij via een invoerverzending, hetzij met een andere methode.
Klik op evenementDit evenement is een oude bekende, zoals de naam al aangeeft, wordt het geactiveerd wanneer u op een element in onze applicatie klikt.
HasFocus-evenementDeze gebeurtenis wordt geactiveerd wanneer een element dat doorgaans wordt ingevoerd, tekstgebied of selecteer door de gebruiker wordt geselecteerd en op dat moment actief is.
Er is ook de mogelijkheid om andere evenementen te gebruiken die beschikbaar zijn in de ZON bijvoorbeeld mouseover, toets indrukken om de functionaliteit van onze modelweergave naar die niveaus uit te breiden.
In de volgende oefening gaan we de kennis van gebeurtenissen die we hebben verworven toepassen, we gaan een klein formulier maken waarin we een lijst krijgen, en elke keer dat we de muisaanwijzer over een optie bewegen, wordt een afbeelding weergegeven. weergegeven, is dit natuurlijk een demonstratieve implementatie en is het niet geschikt voor productie, maar het helpt ons te begrijpen waar we aan hebben gewerkt.
In dit geval hebben we bovendien nodig: Knockout.js de bibliotheek van jQuery om enkele effecten in onze applicatie te gebruiken, dus het ideaal is om het te downloaden en op te slaan in dezelfde map of map waarin we hebben Knockout.js, of misschien gebruik het van uw CDN officieel. Laten we eens kijken naar de code die we nodig hebben:

 Formulieren in knockout.js

Wat we hier eenvoudig hebben gedaan, is een lijst met dingen maken met een beschrijving en een afbeelding, deze afbeelding kan overal toegankelijk zijn voor de toepassing, in dit geval hebben we de hoofdmap gekozen, dan maken we een functie die de afbeelding toevoegt aan een kiezer met jQuery zodat we hetzelfde kunnen laten zien in de ZON.
In het deel van HTML we zien dat we een lijst hebben gemaakt met de elementen die bij de lijst horen spullen en tot slot geven we aan dat de gebeurtenis is mouseover en de functie die moet worden uitgevoerd wanneer deze gebeurtenis zich voordoet. Laten we eens kijken hoe onze applicatie eruitziet wanneer we deze in onze browser uitvoeren:

Als we vervolgens de muiscursor naar sommige teksten verplaatsen, wordt de bijbehorende afbeelding geladen en kunnen we de functionaliteit van ons voorbeeld zien:

Omdat het een dynamische verandering is, kunnen we de verandering natuurlijk niet waarderen, maar als we de cursor naar het bovenste element verplaatsen, verandert de afbeelding. Hiermee hebben we deze tutorial afgerond, waarmee we in het werk van vormen zijn gedoken met Knockout.js, waardoor we tools krijgen om de vastlegging en validatie van de gegevens van onze gebruikers te verbeteren.