How to pattern nested array of objects in dojo 1.8?
Ok, so I'm trying to build something with Dojo 1.8 that looks like the following ...
<ul class="groups">
<li class="group">
<ul class="items">
<li class="item"></li>
</ul>
</li>
</ul>
I made a simple TemplatedWidget for "item" (allows you to call its TypeAItem, but there may be different types of "items" later, requiring different templates.
I have a JSON that represents groups that look like this:
[{
name: "groupName",
items: [{ title: "Item 1", type: "someRandomType", otherStuff: {} }]
}]
My problem is that I am not sure what the best way would be to create this nested list.
I originally just wanted to use some sort of looping convention like in Mustache, but Dojo templates don't seem to support that. Then, after reading Creating a Custom Widget , I wanted to just use a nested loop like this ...
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 if I wanted a list of some other type of item types, then I can just change one line of code, or better yet, set this as a function and just pass it to the widget that represents the item.
Since I don't know how to get this to work, I started thinking that I might need to set up the groups in my own widget and then create the items in the postCreate method. However, I need to figure out how to pass the group.items array as well as how to make it flexible enough to handle different types of items later.
If anyone could help I would really appreciate it!
source to share
To create domNodes programmatically, use the create method in dom-construct.
Your widget needs: " 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 will place it later using dojo place . In addition, you can use the dojo array functionality for a loop, which allows you to create declarations and create helper functions for these nodes.
Depending on how different these groups and elements are, you can still go with the idea of creating child widgets.
Another approach is to use the dojox dtl template, which allows you to mix loop code within your template. These templates work like django templates (and you will need to refer to the django docs to figure it out)
source to share