0

私のjquesy ajax呼び出しはこの結果を返します。

var clientData = [
     { name: "test1", id: 1, parentid: 0, desc: "test desc1"  },
     { name: "test2", id: 2, parentid: 0, desc: "test desc1"  },
     { name: "test3", id: 3, parentid: 0, desc: "test desc1"  },
     { name: "test1-1", id: 4, parentid: 1, desc: "test desc4"  },
     { name: "test1-2", id: 5, parentid: 1, desc: "test desc5"  },
     { name: "test2-1", id: 6, parentid: 2, desc: "test desc6"  }
 ];

そして、jquery テンプレートを使用して、このデータのネストされた ul li リストを作成したいと考えています。

お気に入り。

  • テスト 1 (テスト desc1)
    • テスト 1-1 (テスト desc4)
    • テスト 1-2 (テスト desc5)
  • テスト 2 (テスト desc2)
    • テスト 2-1 (テスト desc6)
  • テスト 3 (テスト desc3)

誰でもjqueryテンプレートを書くのを手伝ってくれませんか.

コードテンプレートを使用してli要素を作成し、ulのように追加しました....

  <script id="menuTemplate_inner" type="text/x-jquery-tmpl">  

       {{if parentid == 0}}
           <li  class="f_level" id="cat_${id}"> 
       {{else}}
            <li  class="inner_level" id="cat_${id}"> 
       {{/if}}    
        ${name} (${desc}) 
       </li>      
</script>

入れ子にする方法がわかりません

4

1 に答える 1

2

まず、階層テンプレートには通常、階層データが供給されるため、サブテンプレートをより自然に呼び出すことができます。以下の例は、データのより適切な表現であり、より単純なテンプレートにつながります。

var clientData = [
    { name: "test1", id: 1, parentid: 0, desc: "test desc1", children: [
        { name: "test1-1", id: 4, parentid: 1, desc: "test desc4" },
        { name: "test1-2", id: 5, parentid: 1, desc: "test desc5" }
    ] },
    { name: "test2", id: 2, parentid: 0, desc: "test desc1", children: [
        { name: "test2-1", id: 6, parentid: 2, desc: "test desc6" }
    ] },
    { name: "test3", id: 3, parentid: 0, desc: "test desc1" }
];

ここで、操作しているデータの表現を変更できないと仮定すると、単一のテンプレートを使用してフラットな配列から要素の階層を実際に構築できます。主な理由は次のとおりです。

  • テンプレートは自分自身を再帰的に呼び出すことができます。

  • テンプレートの呼び出しは、引数 ( とマージされるオブジェクト$item) を取ることができます。

テンプレートを「通常の」関数と見なす場合 (結局のところ、それがコンパイルされたものとまったく同じです)、parentId引数を取り、指定された親に一致するアイテムのみをレンダリングすることは理にかなっています。あなたは既に0トップレベルの項目に (親なし) を使用していますが、これは私たちにぴったりで、現在の項目を新しい親として再帰的に関数を呼び出すことができます。

最初の呼び出しから始めましょう。最上位の親 ID を渡す必要があります(ただし、データ項目の既存のプロパティとの混同を避けるために0呼び出しません)。逆説的に、データ配列も渡す必要があります。すでにtmpl()の最初の引数であるため、これは冗長に思えますが、それは、明示的に渡さない限り、呼び出されたテンプレートが元の配列ではなく、現在の項目のみを参照するためです。結果のコードは次のようになります。parentIdparentid

$("#menuTemplate_inner").tmpl(clientData, {
    clientData: clientData,  // Pass original array.
    forParent: 0             // Start at top-level.
}).appendTo("ul");

さて、テンプレート自体。実行するタスクは 3 つあります。

  • 指定された親と一致する場合、現在のアイテムをレンダリングします。

  • ${}テンプレート タグと三項条件演算子を使用して、適切なクラスを公開します (f_level最上位の場合、それ以外のinner_level場合) 。

  • 元のデータ配列と現在のアイテムを新しい親として再帰的に呼び出します。これは{{tmpl}}テンプレート タグによって実現されます。

結果のテンプレートは次のとおりです。

<script id="menuTemplate_inner" type="text/x-jquery-tmpl">
    {{if parentid == $item.forParent}}
        <li class="${ parentid ? 'inner_level' : 'f_level' }" id="cat_${id}">
            ${name} (${desc})
        </li>
        <ul>
            {{tmpl($item.clientData, {
                clientData: $item.clientData,
                forParent: id
            }) "#menuTemplate_inner"}}
        </ul>
    {{/if}}
</script>

この fiddleでテストできます。

于 2012-10-20T11:40:50.660 に答える