使用jQuery模板嵌套列表

Question

我的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列表。

like。

• 试验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> 

我不知道，使其嵌套

Answer 1

一的方式，分层模板通常送入分级数据，所以他们可以更自然地调用子模板。下面的例子将是您的数据更合适的表示，并导致更简单的模板：

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" } 
]; 

现在，假设你不改变，你正在使用的数据的表示，你的确可以构建元素的层次结构从平坦阵列与单个模板，主要是因为：

• 模板可以调用自身递归，

• 模板调用可以使用参数（其被合并物体）。

如果我们考虑一个模板作为“常规”功能（毕竟，这正是它被编译成），这将是有意义采取parentId参数，只渲染谁指定的父匹配的项目。您已经使用0（没有父级）用于顶级项目，这很适合我们，并允许我们用当前项目递归调用函数作为新父项。

让我们从第一次调用开始。我们需要传递顶级父ID 0（但我们不会将其称为parentId以避免与数据项中现有的parentid属性混淆）。矛盾的是，我们也必须通过数据数组。这似乎是多余的，因为它已经是tmpl()的第一个参数，但这是因为被调用的模板只能看到当前项目，而不是原始数组，除非我们明确地通过它。由此产生的代码是这样的：

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

现在，模板本身。它有三个任务来执行：

• 渲染当前的项目，如果它指定父匹配，

• 暴露适当的类（f_level的顶层，inner_level以其他方式），可与实现在${}模板标签和ternary conditional operator，

• 调用自身递归与原始数据阵列和当前项目作为新的父母，这是由{{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> 

可以在this fiddle测试。