// 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 = ""; }); });
.d-list-item { background-color: black; color: white; font-family: monospace; height: 45px; }