我有以下JavaScript数组。有人知道不使用一堆循环就可以形成多维导航菜单的有效方法吗？我知道该对象可能更有效，但这是我如何从API接收数据的一个示例。
数组示例：
var arr = [
{
name: "Mens > Jumpers > Cotton",
id: 11
},
{
name: "Mens > Jumpers",
id: 12
},
{
name: "Mens",
id: 13
},
{
name: "Womens",
id: 14
},
{
name: "Womens > Shoes",
id: 15
}
];
所需的输出：
<ul>
<li data-attr="13">Mens
<ul>
<li data-attr="12">Jumpers
<ul>
<li data-attr="11">Cotton</li>
</ul>
</li>
</ul>
</li>
<li data-attr="14">Womens
<ul>
<li data-attr="15">Shoes</li>
</ul>
</li>
</ul>
这是我Handlebars根据您的要求使用的解决方案：
Handlebars.registerPartial('nested',
`<ul>
{{#each children}}
<li data-attr="{{id}}">{{name}}
{{#if children}}
{{> nested}}
{{/if}}
</li>
{{/each}}
</ul>`);
要将arr对象准备为部分的上下文，请执行以下操作：
arr = arr.map(function(li) {
return {
name: li.name.split(/\s*>\s*/g),
id: li.id
};
}).sort(function(a, b) {
return a.name.length - b.name.length || a.id - b.id;
});
arr = arr.map(function(parent) {
var parentName = parent.name.join(' > ');
parent.children = arr.filter(function(child) {
return (
child.name.slice(0, parent.name.length).join(' > ') === parentName &&
child.name.length - parent.name.length === 1
);
});
return parent;
}).filter(function(li) {
var depth = li.name.length - 1;
li.name = li.name[depth];
return depth === 0;
});
上面的排序可能是不必要的，但为了安全起见，我这样做是为了确保父母优先，孩子优先。以下是完整的演示：
// initial data
var arr = [
{
name: "Mens > Jumpers > Cotton",
id: 11
},
{
name: "Mens > Jumpers",
id: 12
},
{
name: "Mens",
id: 13
},
{
name: "Womens",
id: 14
},
{
name: "Womens > Shoes",
id: 15
}
];
// Handlebars partial
Handlebars.registerPartial('nested',
`<ul>
{{#each children}}
<li data-attr="{{id}}">{{name}}
{{#if children}}
{{> nested}}
{{/if}}
</li>
{{/each}}
</ul>`);
// format data to context of partial
arr = arr.map(function(li) {
return {
name: li.name.split(/\s*>\s*/g),
id: li.id
};
}).sort(function(a, b) {
return a.name.length - b.name.length || a.id - b.id;
});
arr = arr.map(function(parent) {
var parentName = parent.name.join(' > ');
parent.children = arr.filter(function(child) {
return (
child.name.slice(0, parent.name.length).join(' > ') === parentName &&
child.name.length - parent.name.length === 1
);
});
return parent;
}).filter(function(li) {
var depth = li.name.length - 1;
li.name = li.name[depth];
return depth === 0;
});
// render the HTML
var main = Handlebars.compile('{{> nested}}');
document.body.innerHTML = main({children: arr});body > ul {
padding: 0;
}
ul, li {
display: block;
padding-left: 1em;
}
ul:before {
content: "<ul>";
}
ul:after {
content: "</ul>";
}
li:before {
content: "<li data-attr=\"" attr(data-attr) "\">";
}
li:after {
content: "</li>";
}<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句