w2uiのListとknockoutでリスト項目の表示と変更イベントの検知
JavaScirptでMVVMを実現するライブラリ「knockout.js」と「w2uiのList」を連携させて動作させる機会があったので、忘れない様にメモっておきます。
コード
流れとしては、リストAの項目を変更した際のchangeイベントでknockoutでバインドした関数を呼び出して、リストBの項目を書き換えます。
◆ HTML
<div class="w2ui-field">
<label>リストA:</label>
<div> <input id="list-a" type="list" data-bind="event: { change: changeListA }"></div>
</div>
<div class="w2ui-field">
<label>リストB:</label>
<div> <input id="list-b" type="list"></div>
</div>
◆ JavaScript
// リストAのデータ
var data =
[
{
id: 1, text: "a", children: [
{ id: 1, text: "a-1" },
{ id: 1, text: "a-2" },
{ id: 1, text: "a-3" }
]
},
{
id: 2, text: "b", children: [
{ id: 1, text: "b-1" },
{ id: 1, text: "b-2" },
{ id: 1, text: "b-3" }
]
},
{
id: 3, text: "c", children: [
{ id: 1, text: "c-1" },
{ id: 1, text: "c-2" },
{ id: 1, text: "c-3" }
]
}
];
// リストAのデータセット
$("#list-a").w2field("list", {
items: data,
selected: data[0]
});
// リストBのデータセット
changeListA();
// リストAのイベント登録
var viewModel = {
changeListA: changeListA
};
ko.applyBindings(viewModel, document.getElementById("list-a"));
// リストA変更時に実行される処理
function changeListA() {
var data2 = $("#list-a").data("selected").children;
$("#list-b").w2field("list", {
items: data2,
selected: data2[0]
});
}