deliteful-list-List-multisectable

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>
<d-linear-layout id="container">
    
</d-linear-layout>

CSS

/* CSS to add a selection mark on the default item renderer */
.d-multiselectable .d-selected .d-list-item-icon::before {
    content: "\2713";
    padding-left: 5px;
}

#container {
    width: 100%;
    height: 100%;
}

JavaScript

require.config({
    baseUrl: "http://ibm-js.github.io/libraries/master/"
});
require(["deliteful-build/layer"], function () {
    require([
        "delite/register",
        "dstore/Memory",
        "deliteful/list/List",
        "deliteful/LinearLayout",
        "requirejs-dplugins/css!delite/themes/defaultapp.css",
        "delite/theme!delite/themes/{{theme}}/global.css", // page level CSS
        "requirejs-domready/domReady!"
    ], function (register, Memory) {
        var console = document.createElement("p");
        console.innerHTML = "Click to select an item.";
        container.appendChild(console);
        var list = register.createElement("d-list");
        var dstore = new Memory();
        list.className = "fill";
        list.isAriaListbox = true;
        list.setAttribute("aria-label", "Sample list with multiple selection mode enabled");
        list.selectionMode = "multiple";
        dstore.add({label: "first item"});
        dstore.add({label: "second item"});
        dstore.add({label: "third item"});
        dstore.add({label: "fourth item"});
        dstore.add({label: "fifth item"});
        list.source = dstore;
        list.on("selection-change", function (event) {
            if (event.newValue) {
                console.innerHTML = "Current selection: " + this.selectedItems.map( function (item, index) {return item.label;}).join(", ");
            } else {
                console.innerHTML = "Click to select an item.";
            }
        }.bind(list));
        list.placeAt(container);
        document.body.style.display = "";
    });
});