webix データバインディング

[Webix]コンポーネント間のデータバインディング入門

Webix Advent Calendar 2014 10日目の記事です。

これまで、Listコンポーネントの作成や、Formコンポーネントを使い方を掲載してきましたが、本日はこの二つのコンポーネント間でデータを束縛し、片方で行われた操作がもう一方のコンポーネントに反映されるようにしてみます。

Webixでは簡単にコンポーネント同士を結びつけることができます。

リストとフォームの相互作用

リストを選択すると選択されたアイテムのデータがフォームに反映され編集できるように、またアイテムが選択されていない際にはフォームに入力されたデータが新規アイテムとしてリストに追加されるという相互作用の仕組みを作成します。

example

束縛

コンポーネント同士を結びつけるのは下記のたった一行ですみます。

これだけで、リスト上でアイテムを選択した際にフォームにデータが反映され、フォーム側では、

上記メソッドを実行するだけでアイテムデータの編集/追加がリストへ反映されます。

備考

Webixには他にも便利なコンポーネント間のデータバインディングやシンク(同期)の仕組みがありますので、興味のある方は下記ドキュメントをご覧ください。

Data Binding and Syncing