首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用Chameleon ZPT呈现任意深度的嵌套元素

使用Chameleon ZPT呈现任意深度的嵌套元素
EN

Stack Overflow用户
提问于 2013-02-04 19:19:58
回答 2查看 441关注 0票数 3

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

我在Chameleon中找不到某种递归方法来做到这一点。这似乎是一种常见的需求,所以我想知道呈现任意深度的嵌套元素的正确方式是什么?

但是,可能也有一些菜单«widget»已经可用,经过充分测试,并与金字塔和查瓜兼容?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-02-04 20:49:24

代码语言:javascript
复制
<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>
票数 3
EN

Stack Overflow用户

发布于 2014-06-25 12:06:11

这是对Graeme的问题的一种回答,该问题是关于bismigalis的答案的输入。

您可以从如下所示的Comment对象开始:

代码语言:javascript
复制
class Comment():                                                                                     

    id = 0                                                                                           
    body = ""                                                                                        
    children = []                                                                                    

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

然后,您将创建一个评论及其子级的列表。为了方便起见,我只是手动完成了这项工作(如果样式不正确,很抱歉):

代码语言:javascript
复制
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)

然后,您只需将其作为视图代码内部返回的字典的一部分:

代码语言:javascript
复制
return {'comments': comments}

bismagalis的答案中的模板代码将生成以下HTML:

代码语言:javascript
复制
        <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>标签混合在一起,所以我可能遗漏了一些东西……

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14685684

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档