Property Binding
ofa.js supports binding data to properties of instantiated element objects, such as the value or checked attributes of input elements.
One-way property binding
One-way property binding uses the :toKey="fromKey" syntax to synchronize component data "one-way" to DOM element properties. When the component data changes, the element properties update immediately; however, changes to the element itself (such as user input) are not written back to the component, maintaining a single and controllable data flow.
Current value: {{val}}
Note: editing the input directly won't change the displayed value above
Two-way Property Binding
Two-way property binding uses the sync:xxx syntax to synchronize component data with DOM element attributes bidirectionally. When the component data changes, the DOM element’s attribute is updated; when the attribute changes (e.g., through user input), the component data is updated in sync.
Current Value: {{val}}
Tip: Modifying content in the input field will update the displayed value above in real-time.
Features of Two-way Binding
- Data Flow: Component ↔ DOM Element (Two-way)
- Component data changes → DOM element updates
- DOM element changes → Component data updates
- Applicable to scenarios requiring user input and data synchronization
Common Two-Way Binding Scenarios
Two-way Form Binding Example
Live Preview:
Text: {{textInput}}
Number: {{numberInput}}
Textarea: {{textareaInput}}
Select: {{selectedOption}}
Checkbox status: {{isChecked ? 'checked' : 'unchecked'}}
Notes
- Performance: Two-way binding creates data watchers; heavy use can impact performance.
- Data Consistency: It keeps data and view in sync, but guard against infinite update loops.
- Initial Values: Provide proper initial values for bound data to prevent undefined display issues.
- Event Conflicts: Avoid combining two-way binding with manual event handling on the same element to prevent conflicts.