Eigenschaftsbindung
ofa.js unterstützt das Binden von Daten an Eigenschaften des nach der Instanziierung des Elements erzeugten Objekts, wie z. B. die value- oder checked-Eigenschaft eines input-Elements.
Unidirektionale Eigenschaftsbindung
Unidirektionale Attributbindung verwendet die Syntax :toKey="fromKey", um Komponentendaten "unidirektional" mit den Attributen eines DOM-Elements zu synchronisieren. Bei Änderungen der Komponentendaten werden die Elementattribute sofort aktualisiert; jedoch werden Änderungen am Element selbst (z. B. Benutzereingaben) nicht zurück in die Komponente geschrieben, wodurch der Datenfluss einfach und kontrollierbar bleibt.
Aktueller Wert: {{val}}
Hinweis: Direktes Ändern des Inhalts im Eingabefeld ändert den oben angezeigten Wert nicht
Zweiseitige Attributbindung
Die bidirektionale Eigenschaftsbindung verwendet die sync:xxx-Syntax und ermöglicht die bidirektionale Synchronisierung zwischen Komponentendaten und DOM-Elementen. Wenn sich die Komponentendaten ändern, werden die Attribute des DOM-Elements aktualisiert; wenn sich die Attribute des DOM-Elements ändern (z. B. durch Benutzereingaben), werden auch die Komponentendaten synchron aktualisiert.
Aktueller Wert: {{val}}
Tipp: Änderungen im Eingabefeld aktualisieren den oben angezeigten Wert in Echtzeit
Zwei-Wege-Datenbindung Merkmale
- Datenfluss: Komponente ↔ DOM-Element (bidirektional)
- Komponentendatenänderungen → DOM-Element-Aktualisierung
- DOM-Element-Änderungen → Komponentendaten-Aktualisierung
- Geeignet für Szenarien, die Benutzereingaben und Datensynchronisierung erfordern
Häufige Szenarien für bidirektionale Datenbindung
Formular-Zwei-Wege-Bindung Beispiel
Live-Vorschau:
Text: {{textInput}}
Zahl: {{numberInput}}
Mehrzeiliger Text: {{textareaInput}}
Auswahl: {{selectedOption}}
Checkbox-Status: {{isChecked ? 'Ausgewählt' : 'Nicht ausgewählt'}}
Hinweise
- Performance-Aspekte: Zwei-Wege-Bindung erzeugt Daten-Listener, deren massenhafter Einsatz die Leistung beeinträchtigen kann
- Datenkonsistenz: Zwei-Wege-Bindung stellt die Übereinstimmung von Daten und View sicher, doch sollte man auf endless Update-Schleifen achten
- Initialwert setzen: Stelle sicher, dass die gebundenen Daten sinnvolle Initialwerte besitzen, um undefined-Anzeigeprobleme zu vermeiden
- Event-Konflikte: Verwende nicht gleichzeitig Zwei-Wege-Bindung und manuelle Event-Behandlung am selben Element, um Konflikte zu verhindern