2017.7.17
2020.1.7

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]
    });
}

参考リンク

JavaScript】関連記事