WindowsストアアプリのListViewで色々操作してみる

• home.html

<section aria-label="Main content" role="main">
    <div id="sampleListTemplate" data-win-control="WinJS.Binding.Template">
        <div class="name-box">
            氏名：<span data-win-bind="textContent: name"></span>
            年齢：<span data-win-bind="textContent: age"></span>
        </div>
    </div>
    <div class="basicListView" id="basicListView"
         data-win-control="WinJS.UI.ListView"
         data-win-options="{
                    itemDataSource : sampleData.itemList.dataSource,
                    itemTemplate: select('#sampleListTemplate'),
                    layout: {type: WinJS.UI.ListLayout}
                }">

    </div>

    <button id="addBtn" type="button">追加</button>
    <button id="delSelectedBtn" type="button">選択削除</button>
    <button id="selectAllBtn" type="button">全選択</button>
    <button id="clearSelectedBtn" type="button">全選択解除</button>
    <button id="delAllBtn" type="button">全削除</button>
    <button id="displayBtn" type="button">ログ出力</button>

</section>

• home.css

.basicListView
{
    width: 600px;
    height: 300px;
}
.basicListView .name-box {
    height: 40px;
    padding: 3px;
}

• home.js

(function () {

    "use strict";

    var sampleListItems = [
    { name: "名無し太郎", age: 11},
    { name: "名無し太郎", age: 10}
    ];
    var sampleList = new WinJS.Binding.List(sampleListItems);
    var sampleMembers = { itemList: sampleList };
    WinJS.Namespace.define("sampleData", sampleMembers);

    var sampleListView;

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // この関数は、ユーザーがこのページに移動するたびに呼び出されます。
        // ページ要素にアプリケーションのデータを設定します。
        ready: function (element, options) {
            element.querySelector("#addBtn").addEventListener("click", this.addList);
            element.querySelector("#delSelectedBtn").addEventListener("click", this.delSelected);
            element.querySelector("#selectAllBtn").addEventListener("click", this.selectAll);
            element.querySelector("#clearSelectedBtn").addEventListener("click", this.clearAllSelected);
            element.querySelector("#delAllBtn").addEventListener("click", this.delAll);
            element.querySelector("#displayBtn").addEventListener("click", this.displayBtn);

            sampleListView = element.querySelector("#basicListView").winControl;
            sampleListView.addEventListener("iteminvoked", this.delList, false);

        },
        addList: function (event) {
            var num = sampleList.length;
            sampleList.push({ name: "名無し太郎", age: num });
        },
        delList: function(event){
            sampleList.splice(event.detail.itemIndex, 1);
        },
        delSelected: function (event) {
            var indices = sampleListView.selection.getIndices();
            for (var i = indices.length - 1; i >= 0; i--) {
                sampleList.splice(indices[i], 1);
            }
        },
        selectAll: function (event) {
            sampleListView.selection.selectAll();
        },
        clearAllSelected: function (event) {
            sampleListView.selection.clear();
        },
        delAll: function (event) {
            sampleList.splice(0, sampleList.length);
        },
        displayBtn: function (event) {
            sampleList.forEach(showIteration);

            function showIteration(value, index, array) {
                console.log(index + " 氏名：" + value.name + " 年齢：" + value.age);
            }
        }
    });
})();