Question

我需要显示菜单和子菜单，但我必须使用服务响应来填充结构。

以下是我从该服务获得的示例回复。

{name: "Item A",
    url: "url of Item A",
    title: "sometitle",
    children: [{
               name: "Child1 of A",
               url: "url of Child1 of A",
               title: "sometitle",
               children: [{
                            name: "Grandchild of A",
                            url: "url of Grandchild of A",
                            title: "sometitle",
                            children: [{
                                       name: "Grand Grand child of A",
                                       url: "url of Grand Grand child of A",
                                       title: "sometitle",
                                       children: []
                                       }]
                          }]
               }]
},
{name: "Item B",
url: "url of Item B",
title: "sometitle",
children: []
},
{
 name: "Item C",
 url: "url of Item C",
 title: "sometitle",
 children: []
 }

所有父节点项目A，项目B，项目c显示为菜单按钮，子项为子菜单。我没有关于孩子深度的信息。服务可以包含任意数量的父母和任何级别的子节点。

因此，在运行时我必须创建菜单结构。

我可以使用纯javascript ui / li标签实现相同的目标吗？我想用递归函数动态创建ui，li标签，它给出了一个类似于响应，Any指针所示的树结构？

由于

谷

Answer 1

我自己也遇到过这个要求，我将提出我的解决方案：我定义了一个Knockout模板来渲染一个项目。这将用于呈现树状数据结构中的第一个“层”项。 “魔术”是模板将使用模板本身呈现项目的子项。所以这个想法基本上是一个“递归模板”。（对不起，如果我的解释有点模糊，下面的代码应该说清楚。）

模板可能如下所示（假设您将服务响应存储在名为items的数组中）：

<script type="text/html" id="treeItem"> <li class="item"> <a href="#" data-bind="text: name, attr: { href: url, title: title }"></a> <ul data-bind="template: { name: 'treeItem', foreach: children }"></ul> // Magic is in this line </li> </script>

使用第一层项目的模板：

<ul data-bind="template: { name: 'treeItem', foreach: items }"></ul>

这是一个演示解决方案的小提琴：http://jsfiddle.net/xsjxc8jd/

编辑：它甚至不需要观察者：）

使用Knockout动态创建菜单结构

1 个答案: