deliteful-list-List-custom-item-renderer

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>

CSS

.d-list-item {
    background-color: black;
    color: white;
    font-family: monospace;
    height: 45px;
}

JavaScript

// Template for the custom item renderer
var customItemRendererTemplate = "<template>"
	+ "<div attach-point='renderNode'>"
	+ "<div navindex='0'>{{item.title}}</div>"
	+ "<div class='d-spacer'></div>"
	+ "<div navindex='0'>ISBN: {{item.isbn}}</div>"
	+ "</div>"
+ "</template>";

require.config({
    baseUrl: "http://ibm-js.github.io/libraries/master/"
});

require(["deliteful-build/layer"], function () {
    require([
        "delite/register",
        "dstore/Memory",
        "deliteful/list/ItemRenderer",
        "deliteful/list/List",
        "delite/handlebars",
        "requirejs-dplugins/css!delite/themes/defaultapp.css",
        "delite/theme!delite/themes/{{theme}}/global.css", // page level CSS
        "requirejs-domready/domReady!"
    ], function (register, Memory, ItemRenderer, List, handlebars) {
        var MyCustomRenderer = register("d-book-item", [HTMLElement, ItemRenderer], {
            template: handlebars.compile(customItemRendererTemplate)
        });
        var list = new List();
        list.itemRenderer = MyCustomRenderer;
        list.copyAllItemProps = true;
        var dstore = new Memory();
        dstore.add({title: "Dojo: The Definitive Guide", isbn: "0596516487"});
        dstore.add({title: "Dojo: Using the Dojo JavaScript Library to Build Ajax Applications", isbn: "0132358042"});
        dstore.add({title: "Practical Dojo Projects (Expert's Voice in Web Development)", isbn: "1430210664"});
        dstore.add({title: "The Dojo Toolkit: Visual QuickStart Guide", isbn: "0321605128"});
        dstore.add({title: "Mastering Dojo: JavaScript and Ajax Tools for Great Web Experiences", isbn: "1934356115"});
        list.source = dstore;
        list.placeAt(document.body);
        document.body.style.display = "";
    });
});