使用jQuery jTemplates创建树视图

Question

在我的应用程序中，我以树的形式使用了复杂的数据结构，每个项目都可以有许多子节点。在jQuery jTemplates插件的帮助下，我正在尝试用这些数据构建一种树状视图。我正在寻找一种方法来做这件事，但我走进了死胡同，我不知道如何继续下去。到目前为止，我得到了：

{#foreach $T as item}
<div class="procsSumItem {#if $T.item.Status==3}pending{#/if}">

 <div class="itemIcon {#if $T.item.Status==3}pending{#/if}">
  <div class="taskIcon"></div>
 </div>

 <h2 class="title">{$T.item.Title}</h2>
 <span class="value">{$T.item.Value}</span>
  {#if $T.item.Nodes.length}<div class="expand"></div>{#/if}
 <div class="expandPanel hidden">
 {#foreach $T.item.Nodes as N1}
 {#if $T.N1.Nodes.length}
   <div class="groupHeader">
     <span class="groupIcon"></span>
     <span class="groupTitle">{$T.N1.Title}</span>
   </div>
        {#foreach $T.N1.Nodes as N2}
           {#if $T.N2.Nodes.length}
            {#foreach $T.N2.Nodes as N3}
                {#if $T.N3.Nodes.length}
                    //this can be very deep....
                 {#/if}
            {#/for}
          {#else}
             <ul class="recipents rgroup">
             <li class="{#if $T.b.Replied}rep{#/if}">
                <span class="user"></span>
                <span>{$T.b.Title}</span>
                <div class="arrow"></div>
                {#if $T.b.Replied}<span class="replied">Replied</span>{#/if}
             </li>
            </ul>
        {#/if}
       {#/for}
  {#else}
   <ul class="recipents">
    <li class="{#if $T.a.Replied}rep{#/if}">
         <span class="user"></span>
         <span>{$T.a.Title}</span>
         <div class="arrow"></div>
         {#if $T.a.Replied}<span class="replied">Replied</span>{#/if}   
    </li>
   </ul>
  {#/if}
 {#/for} 
   </div>
 <p class="time">{$T.item.CreatedAt}</p>
</div>
{#/for}

正如您所看到的，我的问题是，在我当前的方法中，查找每个项目的子节点的过程可能是无休止的。如果有帮助，我可以返回每一项的深度，所以也许我可以循环执行此操作。但我不确定这是不是正确的方式。

有什么建议吗？

Answer 1

我会将" node“模板放在一个单独的模板中，并为每个节点{#include}该模板。

在该模板内部，您可以使用{#if}来确定是否有更多的子节点要呈现，然后再次递归地{#include}节点模板(从节点模板本身)，以继续递归呈现节点。

或者，您也可以使用JavaScript来处理递归，通过只传入必要的数据来呈现每个级别的节点模板，然后使用jQuery的操作方法将它们组装在一起。