Travailler avec des formulaires dans Knockout.js

Les formulaires font partie intégrante de toute application ou page Web, car c'est l'un des moyens qui nous permet d'obtenir les données des utilisateurs de manière native, ce qui en fait une tâche très courante.
Knockout.js nous permet de travailler avec votre objet liaison de données tous les éléments qui peuvent constituer un formulaire, donnant ainsi la possibilité de pouvoir valider, déclencher des événements, affecter des observables, etc. Cela rend le traitement des formulaires côté client réalisable, et nous ajoutons donc une couche supplémentaire de validations avant qu'il n'atteigne le côté serveur.
ExigencesNous n'aurons besoin que Knockout.js dans notre système et accessible aux applications que nous allons créer, des autorisations pour écrire des fichiers, une connexion Internet pour obtenir les bibliothèques si nous ne les avons pas, et un éditeur de texte tel que Texte sublime ou alors Bloc-notes ++. Pour exécuter les applications, nous avons besoin d'un type de serveur Web Apache ou alors Nginx dans notre environnement de test.
Avant de passer aux exemples avec des cas que nous pouvons appliquer, il est très important de connaître les liaisons de données qui peut fonctionner avec les éléments du formulaire de notre application, de cette façon nous pouvons commencer à avoir une idée de ce que nous pouvons et ne pouvons pas réaliser, en particulier les moyens d'obtenir les résultats dont nous avons besoin pour que notre application fonctionne correctement :
Valeur de liaison de donnéesCeci est utilisé dans les valeurs ou les éléments d'entrée de sélection, ils peuvent être les éléments d'entrée, de zone de texte ou de sélection, avec cela, nous pouvons capturer la valeur de l'élément au moment où nous devons l'utiliser.
TextInput de liaison de donnéesest contraignant est utilisé avec les éléments input et textarea, sa fonction est similaire à valeur Cependant, si nous lui attribuons une observable, nous pouvons capturer les valeurs au fur et à mesure que l'utilisateur interagit avec l'élément, contrairement à value qui nous donne la valeur lorsque l'élément change, par exemple lorsqu'il perd le focus.
Liaison de données vérifiéeIl est utilisé avec des éléments du type case à cocher Oui boutons radioComme son nom l'indique, il permet d'établir ou de savoir si un élément est sélectionné dans une structure qui utilise les éléments mentionnés.
Options de liaison de donnéesEn utilisant ce contraignant On peut remplir un élément select avec les options qu'il affichera dans le formulaire, c'est parfait quand on veut faire un catalogue d'options dynamiquement.
Liaison de données selectedOptionsÉgalement exclusif à l'élément select, il est utilisé lorsque nous devons définir les options sélectionnées lors de la définition de la propriété multi, puisque nous devons choisir plus d'une option à la foisz.
Activer/désactiver la liaison de donnéesIl nous permet d'activer ou de désactiver l'un des différents éléments du formulaire, avec cela nous pouvons supprimer un élément s'il n'est pas nécessaire de l'utiliser dans le flux de l'application dans une condition particulière, où activer sert à permettre et désactiver désactiver, au cas où nous ne connaissons pas le sens de chaque mot.
Le plus intéressant d'entre eux liaisons de données c'est qu'ils fonctionnent de deux manières, c'est-à-dire que lorsqu'il y a un changement dans un élément, nous pouvons le recevoir dans notre vue modèle et faire un traitement si nécessaire, mais aussi si nous avons un observable et que nous voulons faire quelque chose à partir de l'application à la forme, nous pouvons également sans aucun problème, tant que nous utilisons le liaison de données adapté au type d'élément de formulaire, car Knockout.js il n'interprétera pas les instructions erronées comme pourrait le faire un navigateur avec du code HTML.
Voyons maintenant un exemple pratique de la façon dont nous pouvons utiliser tous les concepts dont nous avons parlé dans la section précédente de ce tutoriel, nous allons créer un élément de type zone de texte qu'il n'acceptera que 140 caractères, comme cette restriction existe, nous devons informer l'utilisateur du nombre de caractères qu'il lui reste au fur et à mesure qu'il écrit.
La logique que nous allons utiliser est très simple, nous allons inclure le data-bind textInput dans l'élément textarea de notre formulaire, puis dans notre vue de modèle, nous allons le définir comme observable, et nous pouvons alors commencer à capturer les caractères au fur et à mesure que l'utilisateur tape. Enfin, nous utilisons un élément calculé Pour créer un composite observable avec le total des caractères restants, pour le moment nous n'allons pas forcer l'utilisateur à écrire moins, nous ne faisons que l'informer des caractères. Regardons le code de notre exemple :

 Formulaires dans knockout.js
Entrer un texte

Caractères restants: 

Il est à noter que nous n'utilisons pas valeur de liaison de données parce que nous avons besoin que le changement du nombre de caractères restants se produise au moment où l'utilisateur tape, car sinon nous ne pourrions indiquer le montant qu'au moment où il passe à un autre élément et ce ne serait pas optimal pour ce que nous visons lors de l'utilisation Knockout.jsCependant, il y aura des cas dans lesquels ce type de comportement est nécessaire, tout dépend de ce dont notre application a besoin. Voyons donc à quoi ressemble notre exemple lorsque nous l'exécutons dans le navigateur :

Bien sûr, ici, nous ne pouvons pas voir dynamiquement comment notre compteur baisse, mais lorsque nous écrivons notre compteur de caractères restants, il est mis à jour comme il est écrit dans l'élément textarea du formulaire :

Un autre aspect dont nous avons souvent besoin dans nos applications lorsque nous travaillons avec des formulaires sont les événements, car avec eux, nous pouvons déclencher des actions lorsque l'utilisateur fait quelque chose en particulier, comme un clic ou survolez une section spécifique de notre HTML. Voyons quelques-uns des événements que nous pouvons utiliser dans nos formulaires :
Soumettre l'événementCet événement ne peut être utilisé que dans l'élément forme, et il est activé juste au moment où l'utilisateur soumet le formulaire au serveur, soit via une soumission d'entrée, soit avec une autre méthode.
Cliquez sur l'événementCet événement est une vieille connaissance, comme son nom l'indique, il est activé lorsque vous cliquez sur un élément au sein de notre application.
Événement HasFocusCet événement est déclenché lorsqu'un élément généralement input, textarea ou select est sélectionné par l'utilisateur et est actif à ce moment-là.
Il y a aussi la possibilité d'utiliser d'autres événements qui sont disponibles dans le SOLEIL comme par exemple survol de la souris, appuyez sur la touche afin d'étendre la fonctionnalité de notre vue modèle à ces niveaux.
Dans l'exercice suivant, nous allons appliquer la connaissance des événements que nous avons acquise, nous allons créer un petit formulaire où nous allons avoir une liste, et chaque fois que nous passerons la souris sur une option, une image sera affiché, bien sûr, il s'agira d'une implémentation démonstrative et il n'est pas adapté à la production, mais cela nous aide à comprendre sur quoi nous avons travaillé.
Dans ce cas, nous aurons en plus besoin Knockout.js la bibliothèque de jQuery pour utiliser certains effets dans notre application, l'idéal est donc de le télécharger et de l'enregistrer dans le même dossier ou répertoire dans lequel nous avons Knockout.js, ou peut-être l'utiliser à partir de votre CDN officiel. Voyons alors le code dont nous avons besoin :

 Formulaires dans knockout.js

Ici ce que nous avons simplement fait est de créer une liste de choses avec une description et une image, cette image peut être accessible n'importe où par l'application, dans ce cas nous avons choisi son répertoire racine, puis nous créons une fonction qui ajoute l'image à un sélecteur avec jQuery afin que nous puissions montrer la même chose dans le SOLEIL.
Dans la partie de HTML nous voyons que nous avons créé une liste avec les éléments appartenant à la liste Choses et enfin nous indiquons que l'événement est survol de la souris et la fonction à exécuter lorsque cet événement se produit. Voyons à quoi ressemble notre application lorsque nous l'exécutons dans notre navigateur :

Ensuite, si nous déplaçons le curseur de la souris sur certains des textes, l'image correspondante se chargera et nous pourrons voir la fonctionnalité de notre exemple :

Bien sûr, comme il s'agit d'un changement dynamique, nous ne pouvons pas apprécier le changement, mais si nous déplaçons le curseur sur l'élément supérieur, l'image changera. Avec cela, nous avons terminé ce tutoriel, avec lequel nous avons plongé dans le travail des formulaires avec Knockout.js, nous donnant des outils pour améliorer la capture et la validation des données qui proviennent de nos utilisateurs.