Attributbindung
ofa.js unterstützt die Bindung von Daten an die Eigenschaften von Objekten, die nach der Instanziierung von Elementen entstehen, wie z. B. die value- oder checked-Eigenschaft eines input-Elements.
Einweg-Attributbindung
Einweg-Attribut-Bindung verwendet die Syntax :toKey="fromKey", um Komponentendaten „einseitig“ mit dem Attribut eines DOM-Elements zu synchronisieren. Ändert sich die Komponentendatum, wird das Elementattribut sofort aktualisiert; Änderungen am Element selbst (z. B. Benutzereingaben) fließen jedoch nicht zurück in die Komponente und halten den Datenfluss einseitig und steuerbar.
Aktueller Wert: {{val}}
Hinweis: Eine direkte Änderung des Inhalts im Eingabefeld ändert den oben angezeigten Wert nicht
Zweiwege-Attributbindung
Die bidirektionale Eigenschaftsbindung verwendet die sync:xxx-Syntax und realisiert die bidirektionale Synchronisation zwischen Komponentendaten und DOM-Elementen. Wenn sich die Komponentendaten ändern, wird die Eigenschaft des DOM-Elements aktualisiert; wenn sich die Eigenschaft des DOM-Elements ändert (z. B. durch Benutzereingaben), werden auch die Komponentendaten synchronisiert.
Aktueller Wert: {{val}}
Hinweis: Änderungen im Eingabefeld aktualisieren sofort den darüber angezeigten Wert
Merkmale der bidirektionalen Bindung
- Datenfluss: Komponente ↔ DOM-Element (bidirektional)
- Änderung der Komponentendaten → Aktualisierung des DOM-Elements
- Änderung des DOM-Elements → Aktualisierung der Komponentendaten
- Geeignet für Szenarien, die Benutzereingaben und Datensynchronisation erfordern
Häufige Szenarien für bidirektionale Bindung
Formular-Zwei-Wege-Bindung Beispiel
Echtzeit-Vorschau:
Text: {{textInput}}
Zahl: {{numberInput}}
Mehrzeiliger Text: {{textareaInput}}
Auswahl: {{selectedOption}}
Checkbox-Status: {{isChecked ? 'angekreuzt' : 'nicht angekreuzt'}}
Hinweise
- Leistungsaspekte：Zwei-Wege-Datenbindung erstellt Daten-Listener, eine umfangreiche Nutzung kann die Leistung beeinträchtigen.
- Datenkonsistenz：Zwei-Wege-Datenbindung gewährleistet die Konsistenz von Daten und Ansicht, aber es ist darauf zu achten, Endlosschleifen-Updates zu vermeiden.
- Initialwertsetzung：Stellen Sie sicher, dass die gebundenen Daten geeignete Anfangswerte haben, um Anzeigeprobleme durch undefined zu vermeiden.
- Ereigniskonflikte：Vermeiden Sie die gleichzeitige Verwendung von Zwei-Wege-Datenbindung und manueller Ereignisbehandlung auf demselben Element, um Konflikte zu vermeiden.