Liaison de propriété
ofa.js permet de lier des données aux propriétés des objets après l'instanciation des éléments, telles que les attributs value ou checked d'un élément input, etc.
Liaison de propriété unidirectionnelle
La liaison de propriété unidirectionnelle utilise la syntaxe :toKey="fromKey" pour synchroniser les données du composant de manière « unidirectionnelle » vers les attributs de l'élément DOM. Lorsque les données du composant changent, l'attribut de l'élément est mis à jour immédiatement ; mais les modifications de l'élément lui-même (comme la saisie de l'utilisateur) ne sont pas répercutées en sens inverse vers le composant, maintenant ainsi le flux de données unique et contrôlable.
Valeur actuelle: {{val}}
Remarque : modifier le contenu directement dans la zone de saisie ne changera pas la valeur affichée ci-dessus.
Liaison bidirectionnel des propriétés
La liaison de propriété bidirectionnelle utilise la syntaxe sync:xxx, réalisant une synchronisation bidirectionnelle entre les données du composant et les éléments DOM. Lorsque les données du composant changent, les attributs des éléments DOM sont mis à jour ; lorsque les attributs des éléments DOM changent (par exemple, lors de la saisie de l'utilisateur), les données du composant sont également mises à jour en synchronisation.
Valeur actuelle : {{val}}
Astuce : modifier le contenu dans la zone 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
- Convient aux scénarios nécessitant une saisie utilisateur et une synchronisation des données
Scènes courantes de liaison bidirectionnelle
Exemple de liaison bidirectionnelle de formulaire
Aperçu en temps réel :
Texte : {{textInput}}
Nombre : {{numberInput}}
Texte multilignes : {{textareaInput}}
Sélection : {{selectedOption}}
État de la case à cocher : {{isChecked ? 'coché' : 'non coché'}}
Points d'attention
- Considérations de performance : la liaison bidirectionnelle crée des écouteurs de données ; un usage massif 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
- Valeur initiale : assurez-vous que les données liées possèdent une valeur initiale appropriée pour éviter l’affichage de undefined
- Conflits d’événements : évitez d’utiliser simultanément la liaison bidirectionnelle et la gestion manuelle d’événements sur le même élément afin de prévenir tout conflit