属性バインディング
ofa.jsは、データを要素のインスタンス化後のオブジェクトのプロパティにバインドすることをサポートしており、例えばinput要素のvalueやcheckedプロパティなどが該当します。
一方向プロパティバインディング
单向属性绑定使用 :toKey="fromKey" 语法，将组件数据“单向”同步到 DOM 元素的属性。组件数据变动时，元素属性即时更新；但元素自身的变动（如用户输入）不会反向写回组件，保持数据流的单一与可控。
現在の値: {{val}}
注意：入力ボックスで直接内容を変更しても、上の表示値は変わりません
双方向プロパティバインディング
双方向属性バインディングは sync:xxx 構文を使用し、コンポーネントデータとDOM要素間の双方向同期を実現します。コンポーネントデータが変更されると、DOM 要素の属性が更新されます。DOM 要素の属性が変更されると（ユーザー入力など）、コンポーネントデータも同期して更新されます。
現在の値: {{val}}
ヒント：入力ボックスの内容を変更すると、上の表示値がリアルタイムで更新されます
双方向バインディングの特徴
- データフロー: コンポーネント ↔ DOM要素（双方向）
- コンポーネントのデータ変更 → DOM要素の更新
- DOM要素の変更 → コンポーネントのデータ更新
- ユーザー入力とデータ同期が必要なシナリオに適しています
よくある双方向バインディングのシナリオ
フォーム双方向バインディングサンプル
リアルタイムプレビュー:
テキスト: {{textInput}}
数値: {{numberInput}}
複数行テキスト: {{textareaInput}}
選択: {{selectedOption}}
チェックボックス状態: {{isChecked ? 'チェック済み' : '未チェック'}}
注意事項
- パフォーマンス考慮：双方向バインディングはデータリスナーを作成するため、多用するとパフォーマンスに影響を与える可能性があります
- データ一貫性：双方向バインディングはデータとビューの一貫性を保証しますが、無限ループ更新を避けるよう注意が必要です
- 初期値設定：バインディングされたデータに適切な初期値があることを確認し、undefined表示の問題を回避します
- イベント競合：同じ要素で双方向バインディングと手動イベント処理を同時に使用しないようにし、競合を防ぎます