当我们不知道它的深度时，extjs如何使用xTemplate使其成为嵌套子级？

Question

首先，对不起，如果我的英语不好，....

在我的脚本中，下面的变量tplData是动态的，...（可以说它是从数据库生成的），
因此，每个孩子都可以有另一个孩子。依此类推，.....现在，我正在堆栈中如何对其进行迭代...

var tplData = [{
            name  : 'Naomi White'
        },{
            name : 'Yoko Ono'
        },{
            name : 'John Smith',
            child : [{
                    name:'Michael (John\'s son)',
                    child: [{
                            name : 'Brad (Michael\'s son,John\'s grand son)'
                    },{
                            name : 'Brid (Michael\'s son,John\'s grand son)',
                            child: [{
                                name:'Buddy (Brid\'s son,Michael\'s grand son)'
                            }]
                    },{
                        name : 'Brud (Michael\'s son,John\'s grand son)'
                    }]
                }]
        }];

        var myTpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div style="background-color: {color}; margin: 10px;">',
                    '<b> Name :</b> {name}<br />',
                        // how to make this over and over every child (while it has )
                        '<tpl if="typeof child !=\'undefined\'">',
                            '<b> Child : </b>',
                                '<tpl for="child">',
                                '{name} <br />',
                            '</tpl>',
                       '</tpl>',
                       ///////////////////////////////////////
                '</div>',
             '</tpl>'
        );
        myTpl.compile();

        myTpl.overwrite(document.body, tplData);

Answer 1

像这样：

    var myTpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div style="background-color: {color}; margin: 10px;">',
                '<b> Name :</b> {name}<br />',
                    '<tpl if="typeof child !=\'undefined\'">',
                        '<b> Child : </b>',
                          '{[ this.recurse(values) ]}',
                        '</tpl>',
                   '</tpl>',
            '</div>',
         '</tpl>',
      {
        recurse: function(values) {
          return this.apply(values.child);
        }
      }
    );

未经测试，因为Ext Core不包含XTemplate，而这可以包含在jsbin和jsfiddle中

我确定输出结果与您所需的信息相去甚远，但是它显示了如何递归。您可能需要将模板分成两部分以获得所需的输出。请查看此幻灯片以获取更多信息：http : //www.slideshare.net/senchainc/advanced-templates-5971877