liaison de propriété
ofa.js prend en charge la liaison de données aux propriétés des objets d'instances d'éléments après leur instanciation, telles que les propriétés value ou checked des éléments input.
Liaison unidirectionnelle des attributs
La liaison unidirectionnelle d'attributs utilise la syntaxe :toKey="fromKey" pour synchroniser "unidirectionnellement" les données du composant vers les attributs des éléments DOM. Lorsque les données du composant changent, les attributs de l'élément sont mis à jour instantanément ; cependant, les modifications propres à l'élément (comme la saisie de l'utilisateur) ne sont pas réécrites en sens inverse dans le composant, maintenant ainsi un flux de données unique et contrôlable.
Valeur actuelle : {{val}}
Remarque : modifier directement le contenu du champ ne change pas la valeur affichée ci-dessus
Liaison de propriété bidirectionnelle
La liaison d'attributs bidirectionnelle utilise la syntaxe sync:xxx, permettant la synchronisation bidirectionnelle entre les données du composant et les éléments DOM. Lorsque les données du composant changent, l'attribut de l'élément DOM se met à jour ; lorsque l'attribut de l'élément DOM change (par exemple via une saisie utilisateur), les données du composant sont également synchronisées.
Valeur actuelle : {{val}}
Astuce : Modifier le contenu dans le champ de saisie mettra à jour en temps réel la valeur affichée ci-dessus
Caractéristiques de la liaison bidirectionnelle
- Flux de données : composant ↔ élément DOM (bidirectionnel)
- Changement des données du composant → mise à jour de l’élément DOM
- Changement de l’élément DOM → mise à jour des données du composant
- Adapté aux scénarios nécessitant une saisie utilisateur et une synchronisation des données
Scénarios courants de liaison bidirectionnelle
Exemple de liaison bidirectionnelle de formulaire
Aperçu en temps réel :
Texte : {{textInput}}
Nombre : {{numberInput}}
Texte multiligne : {{textareaInput}}
Sélection : {{selectedOption}}
État de la case : {{isChecked ? 'Cochée' : 'Non cochée'}}
Remarques
- Considérations de performance : la liaison bidirectionnelle crée des écouteurs de données ; une utilisation massive peut impacter les performances
- Cohérence des données : la liaison bidirectionnelle garantit la cohérence entre données et vue, mais il faut éviter les mises à jour en boucle infinie
- Valeurs initiales : assurez-vous que les données liées possèdent des valeurs initiales appropriées pour éviter l’affichage d’undefined
- Conflits d’événements : évitez d’utiliser simultanément la liaison bidirectionnelle et la gestion manuelle d’événements sur un même élément afin de prévenir les conflits