プロパティバインディング
ofa.js は、データを要素のインスタンス化後のオブジェクトのプロパティにバインドすることをサポートしています。例えば、input 要素の value や checked プロパティなどです。
一方向プロパティバインディング
単方向プロパティバインディングは :toKey="fromKey" という構文を使い、コンポーネントデータを「単方向」にDOM要素の属性に同期させる。コンポーネントデータが変化すると、要素属性は即座に更新されるが、要素自身の変化（ユーザー入力など）はコンポーネントに逆方向で書き戻されず、データフローを単一かつ制御可能に保つ。
現在の値: {{val}}
注意：入力フィールドで直接内容を変更しても、上に表示される値は変わりません
双方向プロパティバインディング
双方向プロパティバインディングは sync:xxx 構文を採用し、コンポーネントデータとDOM要素の間で双方向の同期を実現します。コンポーネントデータが変化すると、DOM要素の属性が更新されます。DOM要素の属性が変化した場合（ユーザー入力など）、コンポーネントデータも同期して更新されます。
現在の値: {{val}}
ヒント：入力フィールドの内容を変更すると、上に表示される値がリアルタイムで更新されます
双方向バインディングの特徴
- データフロー：コンポーネント ↔ DOM要素（双方向）
- コンポーネントのデータ変化 → DOM要素の更新
- DOM要素の変化 → コンポーネントのデータ更新
- ユーザー入力とデータの同期が必要なシーンに適しています
一般的な双方向バインディングシナリオ
フォーム双方向バインディング例
リアルタイムプレビュー:
テキスト: {{textInput}}
数値: {{numberInput}}
複数行テキスト: {{textareaInput}}
選択: {{selectedOption}}
チェック状態: {{isChecked ? 'チェック済み' : '未チェック'}}
注意事項
- パフォーマンスの考慮：双方向バインディングはデータリスナーを作成するため、大量に使用するとパフォーマンスに影響する可能性がある
- データの一貫性：双方向バインディングはデータとビューの一貫性を保証するが、無限ループの更新を避けることに注意が必要
- 初期値の設定：バインドされるデータに適切な初期値を設定し、undefined の表示問題を回避する
- イベントの競合：同一要素で双方向バインディングと手動のイベント処理を同時に使用しないよう注意し、競合を避ける