Attribute Binding
ofa.js supports binding data to properties of the object after element instantiation, such as the value or checked attribute of an input element.
One-way property binding
Unidirectional attribute binding uses the :toKey="fromKey" syntax，to synchronize component data “one-way” to DOM element attributes。When component data changes，element attributes update instantly；however，changes to the element itself (such as user input) do not write back to the component，keeping the data flow unidirectional and controllable.
Current value: {{val}}
Note: Changing the content directly in the input box will not alter the value shown above
Two-way Property Binding
Two-way property binding uses the sync:xxx syntax, achieving bidirectional synchronization between component data and DOM elements. When the component data changes, the attributes of the DOM element are updated; when the attributes of the DOM element change (such as user input), the component data is also updated synchronously.
Current value: {{val}}
Tip: Modifying the content in the input box will update the displayed value in real time
Characteristics of Two-Way Binding
- Data flow: component ↔ DOM element (bidirectional)
- Component data changes → DOM element updates
- DOM element changes → component data updates
- Suitable for scenarios requiring user input and data synchronization
Two-Way Binding of Objects
For object type data binding, you do not need to use the sync syntax; you can directly use : for one-way passing. This is because JavaScript objects are shared by reference. When a parent component passes an object to a child component, the child component receives a reference to the same object, and modifications to the object will directly reflect on the original data.
ofa.js retains this characteristic of JavaScript, so the unidirectional passing of objects is effectively equivalent to bidirectional passing. For example:
<template page>
<child-comp :userData="userInfo"></child-comp>
<script>
export default async () => {
return {
data: { userInfo: { name: "Zhang San", age: 25 } }
};
};
</script>
</template>Directly modifying userData.name in the child-comp component will also update userInfo.name in the parent component, because they point to the same object reference.
Common two-way binding scenarios
Two-way Binding Example
Live Preview:
Text: {{textInput}}
Number: {{numberInput}}
Multiline Text: {{textareaInput}}
Selected: {{selectedOption}}
Checkbox Status: {{isChecked ? 'Checked' : 'Unchecked'}}
Notes
- Performance Considerations: Two-way binding creates data listeners, and heavy usage may impact performance.
- Data Consistency: Two-way binding ensures consistency between data and view, but care must be taken to avoid infinite update loops.
- Initial Value Settings: Ensure that bound data has appropriate initial values to avoid display issues with undefined.
- Event Conflicts: Avoid using two-way binding and manual event handling on the same element simultaneously to prevent conflicts.