Question

Ok, so I am trying to build something with Dojo 1.8 that will resemble the following…

<ul class="groups">
  <li class="group">
    <ul class="items">
      <li class="item"></li>
    </ul>
  </li>
</ul>

I have made a simple TemplatedWidget for the “item” (lets call it TypeAItem, but there may be different types of “items” later on requiring different templates.

I have JSON that represents the groups, which looks like this…

[{
  name: "groupName",
  items: [{ title: "Item 1", type: "someRandomType", otherStuff: {} }]
}]

My problem is that I’m not sure what the best way would be to build this nested list.

Originally I just wanted to use some sort of looping convention like in Mustache, but Dojo’s templates don’t seem to support that. Then, after reading the Creating a Custom Widget tutorial I wanted to just use a nested for loop like so…

var groupHTML="<ul class='groups'>"
for (group in groups) {
  groupHTML += "<li class='group'>";
  for (item in groups.items) {
    ??? 
    // I'm assuming something like var item = new TypeAItem(item);
    //  but I the tutorial only uses the .placeAt(domNode) function
    // So I'm not sure how to get this to work.
  }
  groupHTML += "</li>
}
groupHTML += "</ul>

This would be easy enough where if I need a list of some other type of item type then I can just change that one line of code, or better yet, set this as a function and just pass in the widget that represents the item.

Since I don’t know how to get this to work, I started thinking I might need to setup the groups into their own widget, and then create the items in the postCreate method. However, then I need to figure out how to pass the group.items array to it, and also how to make it flexible enough to handle different item types later on.

If anyone could help I would greatly appreciate it!

Answer 1

To programmatically create domNodes, use the create method in dom-construct.

In your widget, require: “dojo/dom-construct” as domConstruct

// create the groups and place it on the page
var groups = domConstruct.create("ul", {'class':'groups'}, this.someAttachPoint, 'last');
 // loop
 var group = domConstruct.create("li", {'class':'group'}, groups, 'last');
  // loop
  var items= domConstruct.create("ul", {'class':'items'}, group , 'last');
   // loop
   var item= domConstruct.create("li", {'class':'item',innerHTML:'item X'}, items, 'last');
   // or instead of innerHTML:  item.textContent = 'Some text'; // (check browser support)

Note that domConstruct.create does not require you to place the node when it is created and ‘last’ is the default. You place it later using dojo place. Also, you can use dojo’s array functionality for the looping which allows you to get creative and have a helper function create these nodes.

Depending on how different these groups and items are, you may still want to go with your idea of creating child widgets.

Another approach is to use a dojox dtl template which allows you mix the code for the loop inside your template. These templates work like django templates (and you will need to reference the django docs to figure it out)