artTemplate子模板include

art.Template：https://github.com/aui/art-template

下面来实现利用模版来实现递归调用生成tree

 

 

 

<script type="text/html" id="list1">

    <div style="padding:10px;">
        <div id="id_{{id}}">
            <span>{{title}}</span>
            <span>{{content}}</span>
            {{if children.length>0}}

            {{each children as node2}}
            {{include 'list1' node2}}
            {{/each}}

            {{/if}}
        </div>
    </div>

</script>

<script type="text/javascript">

    var data = {
        "id": "00000",
        "title": "标题0",
        "content": "标题0",
        "children": [
            {
                "id": "111111",
                "title": "标题1",
                "content": "标题1",
                "children": [
                    {
                        "id": "22222",
                        "title": "标题2",
                        "content": "标题2",
                        "children": [
                            {
                                "id": "333333",
                                "title": "标题3",
                                "content": "标题3",
                                "children": []
                            }
                        ]
                    }
                ]
            },
            {
                "id": "55555",
                "title": "标题5",
                "content": "标题5",
                "children": [
                    {
                        "id": "66666",
                        "title": "标题6",
                        "content": "标题6",
                        "children": [
                            {
                                "id": "7777777",
                                "title": "标题7",
                                "content": "标题7",
                                "children": []
                            }
                        ]
                    }
                ]
            }
        ]


    }


    var treeHTML = template("list1", data);

    $("body").append(treeHTML);

   


</script>

生成的结果图如下：

 

 不过我发现如果用ul标签来实现的话会出现li不能准确的被追加到children的ul里面不知道是什么原因，如果您有不同的看法欢迎评论交流。

技术交流QQ群：15129679