0

私のアプリでは、各アイテムが多くの子ノードを持つことができる場合、ツリーの形で複雑なデータ構造を持っています。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}

ご覧のとおり、私の問題は、現在のアプローチでは、各アイテムの子ノードを見つけるプロセスが無限に続く可能性があることです。それが役立つ場合は、各アイテムの深さを返すことができるので、このアクションをループできるかもしれません。しかし、これが正しい方法かどうかはわかりません。

助言がありますか？

4

1 に答える 1

1

「ノード」テンプレートを別のテンプレートに配置し、{#include}そのテンプレートをノードごとに配置します。

そのテンプレート内で を使用して、{#if}レンダリングする子ノードがまだあるかどうかを判断し{#include}、ノード テンプレートを再帰的に (ノード テンプレート自体から) 再帰的にレンダリングし続けることができます。

または、代わりに JavaScript を使用して再帰を処理し、必要なデータだけを渡してノード テンプレートの各レベルをレンダリングし、jQuery の操作メソッドを使用してそれらを組み立てることもできます。

于 2012-09-13T18:13:28.910 に答える