使用 Chameleon ZPT 渲染具有任意深度的嵌套元素答案

【问题标题】：Rendering nested elements with an arbitrary depth using Chameleon ZPT使用 Chameleon ZPT 渲染具有任意深度的嵌套元素
【发布时间】：2013-01-19 02:09:56
【问题描述】：

我正在使用 Pyramid 框架，我想用 Chameleon 渲染一个带有任意深度的嵌套列表 (ul, li) 的 html 菜单。

为了做到这一点，我在 Chameleon 中找不到某种递归方法。这似乎是一个普遍的需求，所以我想知道渲染具有任意深度的嵌套元素的正确方法是什么？

但是，可能还有一些菜单«widget»已经可用，经过全面测试并与金字塔和变色龙兼容？

【问题讨论】：

标签： python pyramid chameleon template-tal template-metal

【解决方案1】：

<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>

【讨论】：

嗨，您能否提供一个参考或示例来说明如何实际使用它，如何将它带入我的主模板？我需要python代码吗？

【解决方案2】：

这是对 Graeme 的问题的一个答案，该问题是关于输入 bissigalis 的答案。

您将从这样的 Comment 对象开始：

class Comment():                                                                                     

    id = 0                                                                                           
    body = ""                                                                                        
    children = []                                                                                    

    def __init__(self, id, body, children):                                                          
        self.id = id                                                                                 
        self.body = body                                                                             
        self.children = children

然后，您将创建一个 cmets 及其子项的列表。为了玩玩，我只是手动完成了这个（如果样式不正确，请见谅）：

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)

然后，您只需从视图代码中将其作为返回字典的一部分：

return {'comments': comments}

bismagalis 回答中的模板代码将生成以下 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>

似乎里面混杂了很多无关的<div> 和<ul> 标签，所以我可能漏掉了什么……

【讨论】：

为了避免额外的元素，您将添加 tal:condition 和 tal:omit-tag 属性。所以内部<div> 看起来像：