<ul metal:define-macro="comment_list">
<li tal:repeat="comment comments" class="comment" comment_id="${comment.id}">
<div>ID: ${comment.id} ${comment.body}</div>
<div tal:define="comments comment.children">
<ul metal:use-macro="template.macros['comment_list']" />
</div>
</li>
</ul>
Rendering nested elements with an arbitrary depth using Chameleon ZPT
-
06-03-2022 - |
質問
I am using Pyramid framework and I would like to render with Chameleon a html menu with nested lists (ul, li) of an arbitrary depth.
I cannot find some sort of recursive method in Chameleon in order to do so. It seems such a common need so I am wondering what is the right way of rendering nested elements with an arbitrary depth ?
But, there might be also some menu «widget» already available, fully tested and compatible with pyramid and Chamelon ?
解決
他のヒント
This is one answer to Graeme's question about the input to bismigalis' answer.
You'd start with a Comment
object like this:
class Comment():
id = 0
body = ""
children = []
def __init__(self, id, body, children):
self.id = id
self.body = body
self.children = children
Then, you would create a list of comments and their children. For the sake of playing around, I just did this manually (sorry if it's not properly styled):
comments = []
comment1 = Comment(1, "First comment", None)
comment2 = Comment(2, "Second comment", [
Comment(3, "Third comment", [
Comment(5, "Fifth comment", None)
]
),
Comment(4, "Fourth comment", None),
]
)
comment6 = Comment(6, "Sixth comment", None)
comments.append(comment1)
comments.append(comment2)
comments.append(comment6)
Then, you'd just make it a part of the returned dictionary from inside your view code:
return {'comments': comments}
The template code in bismagalis' answer will generate the following HTML:
<ul>
<li class="comment" comment_id="1">
<div>ID: 1 First comment</div>
<div>
<ul>
</ul>
</div>
</li>
<li class="comment" comment_id="2">
<div>ID: 2 Second comment</div>
<div>
<ul>
<li class="comment" comment_id="3">
<div>ID: 3 Third comment</div>
<div>
<ul>
<li class="comment" comment_id="5">
<div>ID: 5 Fifth comment</div>
<div>
<ul>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="comment" comment_id="4">
<div>ID: 4 Fourth comment</div>
<div>
<ul>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="comment" comment_id="6">
<div>ID: 6 Sixth comment</div>
<div>
<ul>
</ul>
</div>
</li>
</ul>
It appears there are quite a bit of extraneous <div>
and <ul>
tags mixed in there, so I may have missed something...