Accentsconagua

Liaisons interactives

Code
Share

Les éléments de formulaire constituent le moyen classique d'interagir avec les utilisateurs via une page Web. Travailler avec des formulaires dans Knockout.js revient en gros à travailler avec des liaisons d’apparence. Mais, étant donné que les utilisateurs peuvent modifier les champs de formulaire, Knockout.js gère les mises à jour. dans les deux sens. Cela signifie que les liaisons interactives sont à double sens. Ils peuvent être définis par programme et la vue sera mise à jour en conséquence, ou ils peuvent être définis par la vue et lus par programme.

Figure 19: Knockout.js propageant les modifications dans les deux sens

Par exemple, vous pouvez définir la valeur d'un champ de saisie de texte à partir du ViewModel et celui-ci sera affiché dans la vue. Cependant, l'utilisateur qui saisit quelque chose dans le champ de saisie met également à jour la propriété associée sur le ViewModel. Le fait est que Knockout.js s'assure toujours que la vue et le ViewModel sont synchronisés..

Knockout.js comprend 11 liaisons pour interagir avec l'utilisateur:

  • Cliquez sur: -Appeler une méthode ViewModel lorsque l'utilisateur clique sur l'élément.
  • valeur: -Lier la valeur d'un élément de formulaire à une propriété ViewModel.
  • un événement: -Appeler une méthode lorsqu'un événement initié par l'utilisateur se produit.
  • soumettre: -Appeler une méthode lorsqu'un formulaire est soumis.
  • activer: -Activer un élément de formulaire basé sur une certaine condition.
  • désactiver: -Désactiver un élément de formulaire en fonction d'une certaine condition.
  • vérifié: -Lier un bouton radio ou une case à cocher à une propriété ViewModel.
  • options: -Définir un champ.
  • hasfocus: -Définir si l'élément est ciblé ou non.

    • Comme les liaisons d'apparence présentées dans la leçon précédente, elles sont toutes définies dans l'attribut data-bind d'un élément HTML. Certains d'entre eux (comme le Cliquez sur contraignant) fonctionne sur n'importe quel élément, mais d'autres (comme coché) ne peuvent être utilisés qu'avec des éléments spécifiques.

    L’un des principaux avantages de l’utilisation de Knockout.js pour gérer les formulaires HTML est que vous encore seulement avoir à se soucier des données. Chaque fois que l'utilisateur modifie la valeur d'un élément de formulaire, votre ViewModel reflète automatiquement la mise à jour. Cela facilite l'intégration de la saisie de l'utilisateur dans le reste de votre application..

    Un formulaire HTML

    Cette leçon utilise une nouvelle page HTML pour l'exemple en cours d'exécution. Au lieu d’une page d’affichage du panier, nous utiliserons un formulaire d’enregistrement pour les nouveaux clients. Créez un nouveau fichier HTML appelé interactive-bindings.html et ajoutez ce qui suit:

       Liaisons interactives

    Ceci est une version simplifiée de ce que nous avons travaillé tout au long de la série. Dans cette leçon, nous ne nous préoccuperons que de configuration éléments de formulaire. Le traitement des soumissions de formulaire est laissé pour la prochaine leçon.

    le Cliquez sur Contraignant

    La liaison de clic est l'une des liaisons interactives les plus simples. Il appelle simplement une méthode de votre ViewModel lorsque l'utilisateur clique sur l'élément. Par exemple, ajoutez le bouton suivant à l’intérieur du

    élément:

    Lorsque l'utilisateur clique sur le bouton, Knockout.js appelle le saveUserData () méthode sur PersonViewModel. De plus, il transmet deux paramètres à la méthode de gestionnaire: le modèle actuel et l'événement DOM. Une méthode saveUserData () utilisant ces deux paramètres ressemblerait à ceci:

     this.saveUserData = function (modèle, événement) alert (model.firstName () + "tente de passer à la caisse!"); if (event.ctrlKey) alert ("Il maintenait la touche Contrôle enfoncée pour une raison quelconque."); ;

    Dans cet exemple particulier, modèle fait référence à l'instance ViewModel de niveau supérieur, et un événement est l'événement DOM déclenché par le clic de l'utilisateur. L'argument du modèle sera toujours le actuel ViewModel, qui permet d'accéder à des éléments de liste individuels dans une boucle foreach. Voici comment nous avons implémenté la méthode removeProduct () dans la leçon 3:.

    le valeur Contraignant

    La liaison de valeur est très similaire à la liaison de texte que nous avons utilisée tout au long de cette série. La principale différence est que cela peut être modifié par le utilisateur, et le ViewModel sera mis à jour en conséquence. Par exemple, nous pouvons relier le Prénom et nom de famille observables avec un champ de saisie en ajoutant le code HTML suivant au formulaire (avant la

    Les méthodes de gestionnaire doivent ressembler à ceci:

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

    En cliquant Afficher un nom va lire le ViewModel Prénom propriété, qui doit correspondre à la élément, même s'il a été modifié par l'utilisateur. le Nom du set bouton définit la valeur de la propriété de ViewModel, provoquant la élément à mettre à jour. Le comportement de ce dernier est essentiellement le même que celui d'un texte normal.

    Une fois encore, l'objectif de cette synchronisation bidirectionnelle est de vous permettre de vous concentrer sur vos données. Après avoir configuré un valeur contraignant, vous pouvez complètement oublier les éléments de formulaire HTML. Il suffit d’obtenir ou de définir la propriété associée sur le ViewModel et Knockout.js s’occupe du reste.

    Nous n'aurons pas besoin de Afficher un nom et les méthodes setName ou leurs boutons respectifs, afin que vous puissiez les supprimer et les supprimer si vous le souhaitez.

    le un événement Contraignant

    le un événement la liaison vous permet d'écouter des événements DOM arbitraires sur n'importe quel élément HTML. C'est comme une version générique du Cliquez sur contraignant. Mais, comme il peut écouter plusieurs événements, un objet est nécessaire pour mapper les événements aux méthodes (ce paramètre est similaire au paramètre de la liaison attr). Par exemple, nous pouvons écouter les événements mouseover et mouseout du premier élément avec les éléments suivants:

     
     Prénom:

    Lorsque l'utilisateur déclenche un passer la souris événement, Knockout.js appelle le afficher les détails() méthode de notre ViewModel. De même, lorsqu'il quitte l'élément, hideDetails () est appelée. Ces deux paramètres prennent les mêmes paramètres que les gestionnaires de la liaison au clic: la cible de l'événement et l'objet événement lui-même. Implémentons maintenant ces méthodes:

     this.showDetails = fonction (cible, événement) alert ("survolé"); ; this.hideDetails = function (cible, événement) alert ("Mouse out"); ;

    Maintenant, quand vous interagissez avec le Prénom champ, vous devriez voir les deux messages pop-up. Mais au lieu d'afficher un message d'alerte, montrons des informations supplémentaires pour chaque champ de formulaire lorsque l'utilisateur le survole. Pour cela, nous avons besoin d’un autre observable sur PersonViewModel:

     this.details = ko.observable (false);

    le détails property agit comme une bascule que nous pouvons activer et désactiver à l'aide de nos méthodes de gestionnaire d'événements:

     this.showDetails = fonction (cible, événement) this.details (true); ; this.hideDetails = function (cible, événement) this.details (false); ;

    Ensuite, nous pouvons combiner la bascule avec le visible contraignant pour afficher ou masquer les détails du champ de formulaire dans la vue:

     
     Prénom:  Votre prénom

    Le contenu de la devrait apparaître chaque fois que vous passez la souris sur la Prénom champ et disparaissent lorsque vous passez la souris. Ceci est assez proche de la fonctionnalité souhaitée, mais les choses se compliquent lorsque nous voulons afficher les détails de plusieurs champs de formulaire. Comme nous n’avons qu’une seule variable, l’affichage des détails est une proposition tout ou rien: les détails sont affichés pour tout des champs, ou pour aucun d'entre eux.

    Figure 21: Basculement simultané de tous les détails du champ de formulaire

    Une façon de résoudre ce problème consiste à transmettre un paramètre personnalisé à la fonction de gestionnaire..

    Gestionnaires d'événements avec paramètres personnalisés

    Il est possible de transmettre des paramètres personnalisés de la vue au gestionnaire d'événements. Cela signifie que vous pouvez accéder à des informations arbitraires de la vue dans le ViewModel. Dans notre cas, nous utiliserons un paramètre personnalisé pour identifier le champ de formulaire devant afficher ses détails. Au lieu d’une bascule, le détails observable contiendra une chaîne représentant l'élément sélectionné. Premièrement, nous allons apporter quelques légères modifications dans le ViewModel:

     this.details = ko.observable (""); this.showDetails = fonction (cible, événement, détails) this.details (détails);  this.hideDetails = fonction (cible, événement) this.details ("");

    Le seul gros changement ici est l’ajout d’un détails paramètre à la afficher les détails() méthode. Nous n'avons pas besoin d'un paramètre personnalisé pour la fonction hideDetails (), car elle efface simplement les détails observables.

    Ensuite, nous allons utiliser un littéral de fonction dans le un événement contraignant pour passer le paramètre personnalisé à showDetails ():

    La fonction littérale pour passer la souris est une enveloppe pour notre afficher les détails() gestionnaire, fournissant un moyen simple de transmettre des informations supplémentaires. Le gestionnaire mouseout reste inchangé. Enfin, nous devons mettre à jour le contenant les détails:

     Votre prénom

    le Prénom Le champ de formulaire doit afficher sa description détaillée lorsque vous passez la souris et se masquer lorsque vous passez la souris, comme dans la section précédente. Seulement maintenant, il est possible d’ajouter des détails à plusieurs champs en modifiant le paramètre personnalisé. Par exemple, vous pouvez activer les détails pour le Nom de famille élément d'entrée avec:

     
     Nom de famille:  Votre nom

    Les liaisons d'événement peuvent être un peu compliquées à configurer, mais une fois que vous comprenez leur fonctionnement, elles offrent des possibilités illimitées de conception réactive. le un événement binding peut même se connecter à la fonctionnalité d'animation de jQuery, décrite dans la Leçon 8:. Pour l'instant, nous allons finir d'explorer le reste des liaisons interactives de Knockout.js. Heureusement pour nous, aucun d'entre eux n'est aussi compliqué que la liaison d'événement.

    le activer désactiver Fixations

    le activer et désactiver Les liaisons peuvent être utilisées pour activer ou désactiver les champs de formulaire en fonction de certaines conditions. Par exemple, supposons que vous vouliez enregistrer un numéro de téléphone principal et un numéro de téléphone secondaire pour chaque utilisateur. Ceux-ci peuvent être stockés en tant qu'observables normaux sur PersonViewModel:

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

    L’observable primaryPhone peut être lié à un champ de formulaire avec un valeur contraignant:

     
     Téléphone primaire:

    Toutefois, il n’est pas logique de saisir un numéro de téléphone secondaire sans spécifier un numéro principal. Nous activons donc le pour le numéro de téléphone secondaire uniquement si primaryPhone n'est pas vide:

     
     Téléphone secondaire:

    Désormais, les utilisateurs ne pourront interagir qu'avec le Téléphone secondaire champ s'ils ont entré une valeur pour Téléphone primaire. le désactiver la liaison est un moyen pratique d’annuler la condition, mais fonctionne autrement exactement comme enable.

    le vérifié Contraignant

    vérifié est une reliure polyvalente qui présente des comportements différents en fonction de la manière dont vous l’utilisez. En général, la liaison vérifiée est utilisée pour sélectionner et désélectionner les éléments de formulaire vérifiables de HTML: cases à cocher et boutons radio..

    Cases à cocher simples

    Commençons par une simple case à cocher:

     
    Ennuyez-moi avec des offres spéciales:

    Cela ajoute une case à cocher à notre formulaire et le lie au ennui propriété du ViewModel. Comme toujours, il s’agit d’une connexion à double sens. Lorsque l'utilisateur sélectionne ou désélectionne la boîte, Knockout.js met à jour ViewModel et, lorsque vous définissez la valeur de la propriété ViewModel, il met à jour la vue. N'oubliez pas de définir la contrariété observable:

     this.annoyMe = ko.observable (true);

    En utilisant le vérifié La liaison de cette manière revient à créer une relation univoque entre une case à cocher unique et un observable booléen..

    Figure 22: Connexion d’un observable booléen avec une seule case à cocher

    Tableaux à cocher

    Il est également possible d'utiliser le vérifié liaison avec des tableaux. Lorsque vous liez une case à cocher à un tableau observable, les cases sélectionnées correspondent aux éléments contenus dans le tableau, comme illustré dans la figure suivante:

    Figure 23: Connexion d'un tableau observable avec plusieurs cases à cocher

    Par exemple, considérons l'observable suivant:

    this.annoyTimes = ko.observableArray (['matin', 'soir']);

    Nous pouvons connecter les éléments de ce tableau observable à des cases à cocher en utilisant le valeur attribuer sur chaque élément:

     
    Ennuyez-moi avec des offres spéciales:

    Cela utilise le ennui propriété de la leçon précédente pour basculer vers une liste de cases à cocher permettant de sélectionner le moment opportun pour être ennuyé. Puisque valeur = 'matin' est sur la première case à cocher, il sera sélectionné chaque fois que le "Matin" la chaîne est dans le tableau annoyTimes. La même chose vaut pour les autres cases à cocher. "morning" et "evening" sont les contenus initiaux du tableau. Vous devriez donc voir quelque chose comme ce qui suit sur votre page Web:

    Figure 24: Cases à cocher affichant l’état initial de la ennuyer tableau observable

    Et puisque nous utilisons un observable tableau, la connexion est bidirectionnelle-désélectionnant l'une des cases va supprimer la chaîne correspondante de la ennuyer tableau.

    Boutons radio

    Le dernier contexte pour le vérifié la liaison est dans un groupe de boutons radio. Au lieu d’un booléen ou d’un tableau, des boutons radio connectent leurs valeur attribut à une propriété de chaîne dans le ViewModel. Par exemple, nous pouvons transformer notre tableau de cases à cocher en un groupe de boutons d'option en modifiant tout d'abord la commande annoyTimes en chaîne:

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

    Ensuite, tout ce que nous avons à faire est de tourner la éléments en boutons radio:

    Chaque avoir dû "radio" comme type et "annoyGroup" comme nom. Ce dernier n’a rien à voir avec Knockout.js, il les ajoute simplement au même groupe de boutons radio HTML. Maintenant, l'attribut value du bouton radio sélectionné sera toujours stocké dans la propriété annoyTimes.

    Figure 25: Connexion d'une chaîne observable avec plusieurs boutons radio

    le options Contraignant

    le options contraignant définit le contenu d'un terrain avec:

    Vous devriez maintenant avoir une liste déroulante au lieu d'un groupe de boutons radio, mais il ne sert à rien d'avoir une telle liste si vous ne savez pas quel élément est sélectionné. Pour cela, nous pouvons réutiliser le valeur contraignant de plus tôt dans la leçon:

    Cela détermine quelle propriété sur le ViewModel contient la chaîne sélectionnée. Nous devons encore définir cette propriété:

     this.selectedTime = ko.observable ('Dans l'après-midi');

    Encore une fois, cette relation va dans les deux sens. Définir la valeur de heure sélectionnée changera l'élément sélectionné dans la liste déroulante, et inversement.

    Utiliser des objets comme options

    En combinant les options et les liaisons de valeur, vous obtenez tous les outils nécessaires pour utiliser des listes déroulantes contenant des chaînes. Cependant, il est souvent beaucoup plus pratique de sélectionner des objets JavaScript entiers à l'aide d'une liste déroulante. Par exemple, ce qui suit définit une liste de produits rappelant la leçon précédente:

     this.products = ko.observableArray ([nom: 'Bière', prix: 10,99, nom: 'Brats', prix: 7,99, nom: 'Buns', prix: 2,99]);

    Lorsque vous essayez de créer un élément:

    Pour que cet extrait fonctionne, vous devez également définir un produit préféré observable sur votre ViewModel. Knockout.js va peupler cette propriété avec un objet de PersonViewModel.products - pas une chaîne comme dans la section précédente.

    le options sélectionnées Contraignant

    L'autre possibilité de rendu pour HTML

    le Taille attribut définit le nombre d'options visibles, et multiple = 'true' le transforme en une liste à sélections multiples. Au lieu d’une propriété de chaîne, favoriteProducts devrait pointer sur un tableau:

     var brats = nom: 'Brats', prix: 7,99; this.products = ko.observableArray ([nom: 'Bière', prix: 10,99, marmots, nom: 'Buns', prix: 2,99]); this.favoriteProducts = ko.observableArray ([brats]);

    Notez que nous devions fournir la même référence d’objet (marmots) aux deux des produits et favoriteProducts for Knockout.js pour initialiser correctement la sélection.

    le hasfocus Contraignant

    Et ainsi, nous arrivons à notre dernière liaison interactive: hasfocus. Cette liaison bien nommée vous permet de définir manuellement le focus d'un élément interactif à l'aide d'une propriété ViewModel. Si, pour une raison quelconque, vous souhaitez que le champ «Téléphone principal» soit le focus initial, vous pouvez ajouter une liaison hasfocus, comme suit:

     
     Téléphone primaire:

    Ensuite, vous pouvez ajouter un observable booléen pour dire à Knockout.js de le focaliser:

     this.phoneHasFocus = ko.observable (true);

    En définissant cette propriété ailleurs dans votre application, vous pouvez contrôler avec précision le flux de focus dans vos formulaires. De plus, vous pouvez utiliser hasfocus pour suivre les progrès de l'utilisateur à travers plusieurs champs de formulaire.

    Résumé

    Cette leçon portait sur les liaisons interactives, qui exploitent le suivi automatique des dépendances de Knockout.js par rapport aux champs de formulaire HTML. Contrairement aux liaisons d’apparence, les liaisons interactives sont à double sens les liaisons-modifications des composants de l'interface utilisateur sont automatiquement reflétées dans le ViewModel et les assignations aux propriétés ViewModel déclenchent Knockout.js pour mettre à jour la vue en conséquence.

    Les liaisons interactives, les liaisons d’apparence et les liaisons de flux de contrôle composent la boîte à outils de modèles de Knockout.js. Leur objectif commun est de fournir une interface centrée sur les données pour vos applications Web. Une fois que vous avez défini la présentation de vos données à l'aide de ces liaisons, tout ce dont vous avez à vous soucier est de manipuler le ViewModel sous-jacent. C'est un moyen beaucoup plus robuste de développer des applications Web dynamiques.

    Cette leçon a présenté les formulaires du point de vue de la vue et du ViewModel. Les liaisons interactives sont une méthode intuitive et évolutive pour accéder aux entrées de l'utilisateur, mais nous n'avons pas encore expliqué comment extraire ces données du serveur frontal et dans un script côté serveur. La prochaine leçon aborde ce problème en intégrant Knockout.js à la fonctionnalité AJAX de jQuery..

    Cette leçon représente un chapitre de Knockout Succinctly, un eBook gratuit de l'équipe de Syncfusion.

    Code
    ×