Simple iteration with a widget

A basic approach to building up a list in a widget

by brianarn

HTML

<div id="myWidget"></div>

CSS

h2 {
    font-size: 1.4em;
    font-weight: bold;
}

JavaScript

require([
    "dojo/_base/declare",
    "dojo/string",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin"
    ], function(declare, string, _WidgetBase, _TemplatedMixin) {
    var Lister = declare([_WidgetBase, _TemplatedMixin], {
        items: [],
        templateString: '<div><h2>Lister</h2><ul data-dojo-attach-point="listNode"></ul></div>',
        listTemplateString: '<li>${0}</li>',
        postCreate: function() {
            // Super call
            this.inherited(arguments);

            // Build up list stuff
            var list = this.listNode,
                itemTemplate = this.listTemplateString,
                items = this.items,
                str = "",
                i, l;

            for (i = 0, l = items.length; i < l; ++i) {
                str += string.substitute(itemTemplate, [items[i]]);
            }
            list.innerHTML = str;
        }
    });

    new Lister({
        items: ["Apple", "Banana", "Pear"]
    }).placeAt('myWidget');
});