JSRender：递归调用父模板

Question

我有一个用例，其中输入 json 可以有 n 个嵌套子对象，为此我想显示树结构。可能需要某种递归渲染逻辑来实现这一点。我是 jsrender 的新手，所以有人可以帮助我为我的场景提供示例代码。

需要处理的示例 JSON：

{ “编号”：“1”， “钥匙”：[ { “名称”：“测试1”， “价值观”：[ { “参数名称”：“abc” }, { "param_name": "def", “儿童对象”：[ { “实际值”：“a1”， "t2": "a2", "t3": "a3", “儿童对象”：[ { “实际值”：“a1”， "t2": "a2", “t3”：“a3” } ] }, { “实际值”：“a4”， "t5": "a5", “t6”：“a6” } ] } ] } ] }

<script id="theContent" type="text/x-jsrender">
<div class="sec sec-middle">
{{for keys}}
{{for values}}
{{if childObjects}}
{^{tree/}}
{{/if}}
{{/for}}
{{/for}}
</div>
</script>

tree-if.js 如下：

    (function($) {
  "use strict";
  $.views.tags({
      tree: {
        template: '<div class="param-list parm-accord-level-one">' +
        '<div class="param-top-list">' +
            '<div class="parm-col parm-heading">' +
                '<a href="javscritp:void(0);" class="parm-accordion-title"><strong>{{:param_name}}</strong> <i class="far fa-angle-down"></i></a>' +
            '</div>' +
            '<div class="parm-col parm-description">' +
                '<span class="btn grey-btn string-btn">{{:data_type}}</span><span class="normal-text">{{:description}}</span>' +
            '</div>' +
        '</div>' +
        '<div class="parm-accordion-details">' +
            '<div class="tree-sec">' +
                '{{for childObjects}}' +
                    '{{if childObjects}}' +
                      '{{tree/}}' +
                    '{{else}}' +
                    '<div class="param-list">' +
                        '<div class="param-top-list">' +
                            '<div class="parm-col parm-heading">' +
                                '<span>{{:child_param_name}}</span>' +
                                '{{if isMandatory}}' +
                                    '<span class="seconday-text mandatory-text">mandatory</span>' +
                                '{{/if}}' +
                            '</div>' +
                            '<div class="parm-col parm-description">' +
                                '<span class="btn grey-btn string-btn">{{:child_data_type}}</span>' +
                                '<span class="string-text">{{:child_description}}</span>' +
                            '</div>' +
                        '</div>' +
                    '</div>' +
                    '{{/if}}' +
                '{{/for}}' +
            '</div>' +
        '</div>' +    
    '</div>'
      }
    });
  })(this.jQuery);

Answer 1

有一些示例说明了层次结构的递归渲染“：

一个JsViews“树”标签控件

还有这个“jsonview”标签控件示例，它是交互式的，使用 JsViews，但类似的方法可以仅与 JsRender 一起使用。