Est-il possible que les composants d'Aurelia renvoient des valeurs à leurs parents?

Question

Je crée une application en utilisant Aurelia, et dans une partie de cette application j'ai une grille qui liste les utilisateurs, et plus précisément l'état actif des utilisateurs.

Pour permettre l'édition de l'état actif, j'ai créé un contrôle de bouton de glissière (similaire à ceux observés dans iOS) où, glissant vers la gauche est vrai, et à droite est faux. Ce que je voudrais faire est d'utiliser ce contrôle dans ma grille d'utilisateur, de sorte que les gens qui l'utilisent, peuvent simplement cliquer sur le bouton de la diapositive personnalisée pour activer/désactiver l'utilisateur, mais j'ai besoin de ce contrôle pour nourrir sa valeur quand il revient à la ligne, il est placé dans

Quelque chose comme ceci:.

Imaginez ma table ressemble à ceci

<table> 
    <thead> 
    <tr> 
     <th>ID</th> 
     <th>Name</th> 
     <th>Email</th> 
     <th>Is Active?</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr repeat.for="user of userList"> 
     <td>${user.id}</td> 
     <td>${user.name}</td> 
     <td>${user.email}</td> 
     <td><slidebutton active="${user.active}"></slidebutton></td> 
    </tr> 
    </tbody> 
</table> 

cela fonctionne très bien en tant que le bouton coulissant se prépare à une valeur par défaut basée sur le statut actif de l'utilisateur comme attendu.

Cependant, lorsque le bouton de la diapositive est modifié, j'aimerais que la ligne soit notifiée de quelque façon que ce soit, afin que je puisse lui dire de mettre à jour l'extrémité arrière et de changer l'état.

Je ne suis pas contre le passage dans l'ID utilisateur au composant personnalisé EG:

<td><slidebutton active="${user.active}" uid="${user.id}"></slidebutton></td> 

Mais je préfère ne pas avoir le contrôle faire l'appel, ou être faire quelque chose qui me empêche de l'utiliser dans d'autres endroits, comme sur d'autres réseaux qui pourraient avoir différents éléments d'information à bascule. J'avais pensé à une façon basée sur l'événement de le faire, puis j'ai regardé l'une des tables utilisateur et vu qu'il y avait un potentiel pour une table avec plus de 500 lignes, et le suivi/gestion de 500 événements de 500 diapositives les boutons n'ont pas vraiment l'air de quelque chose que je voudrais particulièrement faire.

S'il y a un moyen de refléter la valeur dans l'attribut, alors je pense que ce serait un bon début, mais ce que j'aimerais réellement, si possible, est que le contrôle personnalisé change directement la vue sous-jacente modèle sur la ligne si possible.

Answer 1

Vous pouvez facilement configurer la liaison de données bidirectionnelle. Tout d'abord, vous devriez probablement utiliser la syntaxe .bind au lieu d'utiliser l'interpolation de chaîne pour transmettre des valeurs. En effet, l'utilisation de l'interpolation de chaîne convertira vos valeurs en chaînes, tandis que la syntaxe .bind peut conserver le type de votre passage Il fonctionne également pour la liaison dans les objets et les tels.

<td><slidebutton active.bind="user.active" uid.bind="user.id"></slidebutton></td> 

Nous pouvons changer .bind-.two-way dans le code exemple ci-dessus, et ce raconterons Aurelia que ces liaisons doivent être à double sens. Ce accomplirez ce que vous voulez, mais il serait ennuyeux d'avoir toujours le faire:

<td><slidebutton active.two-way="user.active" uid.bind="user.id"></slidebutton></td> 

Notez que je ne mets la propriété active être dans les deux sens databound, comme je devine que la propriété uid ISN 't changé à l'intérieur du contrôle slidebutton, et donc il n'y a pas besoin de faire une liaison de données bidirectionnelle. Mais nous pouvons définir cette option par défaut pour la liaison de données bidirectionnelle. Regardons comment faire cela.Je suis sûr que vous avez déjà créé les propriétés de liaison pour active et uid dans l'élément personnalisé slidebutton. Je parie qu'ils se présentent comme suit (en ESNext):

@bindable active; 
@bindable uid; 

Si l'on ajoute un peu de configuration à ceux-ci, nous pouvons définir ces propriétés par défaut de liaison de données dans les deux sens, et vous obtiendrez la la liaison de données bidirectionnelle que vous recherchez par défaut.

@bindable({ defaultBindingMode: bindingMode.twoWay }) active; 
@bindable uid; 

Notez que j'utilise bindingMode.twoWay ci-dessus. Vous devrez importer cette énumération à partir du module aurelia-framework. Ainsi, vous pourriez avoir quelque chose comme la ligne suivante en haut du fichier modèle de vue de l » slidebutton:

import {bindable, bindingMode} from 'aurelia-framework'; 

Une fois que vous avez fait cela, vous pouvez revenir à l'utilisation active.bind="user.active" et Aurelia se chargera de la deux DataBinding pour vous.