[Webix]コンポーネント間のデータバインディング入門
Webix Advent Calendar 2014 １０日目の記事です。
これまで、Listコンポーネントの作成や、Formコンポーネントを使い方を掲載してきましたが、本日はこの二つのコンポーネント間でデータを束縛し、片方で行われた操作がもう一方のコンポーネントに反映されるようにしてみます。
Webixでは簡単にコンポーネント同士を結びつけることができます。
リストとフォームの相互作用
リストを選択すると選択されたアイテムのデータがフォームに反映され編集できるように、またアイテムが選択されていない際にはフォームに入力されたデータが新規アイテムとしてリストに追加されるという相互作用の仕組みを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
/*** リストコンポーネント***********************************************/ var LISTDATA = [ {last_name:"清水", first_name: "正行", gender:"man" }, {last_name:"山田", first_name: "花子", gender:"woman" }, {last_name:"鈴木", first_name: "士郎", gender:"man" } ]; //アイテム選択を外す処理 var list_unselect = "$$('list_comp').unselectAll()"; var list_component = { rows:[ { view:"button", value:"選択しない", click:list_unselect}, { id: "list_comp", view: "list", template:"#last_name# #first_name# - {common.itemGender()}", select: true, type:{ itemGender:function(obj){ switch (obj.gender) { case "man": return "男"; break; case "woman": return "女"; break; } } }, data:LISTDATA } ] }; /*** フォームコンポーネント***********************************************/ var form_save = "if($$('form_comp').isDirty()) $$('form_comp').save();"; var form_clear = "$$('form_comp').clear();"; var form_component = { id:"form_comp", view:"form", elements:[ { view:"text", name:"last_name", label:"苗字"}, { view:"text", name:"first_name", label:"名前"}, { view:"radio", name:"gender", label:"性別", value:"man", //初期選択値 options:[ //選択肢 { value:"男", id:"man" }, { value:"女", id:"woman" } ] }, {cols:[ { view: "button", label:"保存する", type:"form", click:form_save }, { view: "button", label:"クリア", click:form_clear }, ]} ] }; /*** レイアウト***********************************************/ webix.ui({ rows:[ list_component, form_component ] }); /*** データバインディング***********************************************/ $$('form_comp').bind($$('list_comp')); |
束縛
コンポーネント同士を結びつけるのは下記のたった一行ですみます。
|
1 |
$$('form_comp').bind($$('list_comp')); |
これだけで、リスト上でアイテムを選択した際にフォームにデータが反映され、フォーム側では、
|
1 |
$$('form_comp').save(); |
上記メソッドを実行するだけでアイテムデータの編集／追加がリストへ反映されます。
備考
Webixには他にも便利なコンポーネント間のデータバインディングやシンク(同期)の仕組みがありますので、興味のある方は下記ドキュメントをご覧ください。
