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

等。

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

现在，假设您无法更改正在使用的数据的表示形式，您确实可以使用单个模板从平面数组构建元素层次结构，主要是因为：

模板可以递归调用，
模板调用可以带参数（与$item合并的对象）。

如果我们将模板视为“常规”函数（毕竟，这正是它被编译成的函数），那么采用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中进行测试。

使用jquery模板的嵌套列表

1 个答案: