Using jade to create an unordered list tree
I have a named object boundedArea
that contains an array of objects boundedArea
in a field children
and I would like to create a tree of unordered lists.
I have the following code:
- for (var index = 0; index < rootAreas.length; index++) {
- var boundedArea = rootAreas[index];
div(class='panel panel-default')
div.panel-heading
| #{boundedArea.NAME}
div.panel-body
- printChildren(boundedArea, 0);
- }
-
- function printChildren(boundedArea, depth) {
- var children = boundedArea.children;
- if (children == null || children.length == 0) {
- return;
- }
ul
- for (var index = 0; index < children.length; index++) {
- var child = children[index];
li #{child.NAME}
- console.log("Printing %s child of %s", child.NAME, boundedArea.NAME);
- printChildren(child, depth + 1);
- }
- }
Now it is obvious that this works when it prints all values. However, since tags ul
and li
are fixed indentation, they are not nested and simply end up being printed in sequence.
Is there a way to dynamically set the indentation level or force them into socket. Or should I use a completely different nesting model.
I tried crossing the indent javascript variable filled with two spaces for each depth level and then tried to use #{indent}
but just created tags with spaces that didn't have what I wanted. While this means that something around this idea may work as it should have been resolved at some level earlier, it is perceived as a sign of some kind.
source to share
Try using a mixin instead of a function. Mixins respect / remember the indentation level (not really sure why the functions don't work).
mixin printChildren(boundedArea, depth)
- var children = boundedArea.children;
- if (children == null || children.length == 0)
- return;
ul
- for (var index = 0; index < children.length; index++)
- var child = children[index];
li #{child.NAME}
+printChildren(child, depth + 1)
- for (var index = 0; index < rootAreas.length; index++)
- var boundedArea = rootAreas[index];
div(class='panel panel-default')
div.panel-heading
| #{boundedArea.NAME}
div.panel-body
+printChildren(boundedArea, 0)
I changed your code a bit. Mixins are called with +
instead -
and must be defined before using them.
I tested it with this sample data:
{
rootAreas: [
{
NAME: 'area1',
children: [
{ NAME: 'child1' },
{ NAME: 'child2' },
{
children: [
{ NAME: 'child3' },
{ NAME: 'child4' },
]
},
]
},
{
NAME: 'area2',
children: [
{ NAME: 'child5' },
{ NAME: 'child6' },
{ NAME: 'child7' },
]
}
]
}
And the template gave this HTML code:
<div class="panel panel-default">
<div class="panel-heading">area1</div>
<div class="panel-body">
<ul>
<li>child1</li>
<li>child2</li>
<li>
<ul>
<li>child3</li>
<li>child4</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">area2</div>
<div class="panel-body">
<ul>
<li>child5</li>
<li>child6</li>
<li>child7</li>
</ul>
</div>
</div>
If you understood correctly, this is what you are looking for.
source to share