用Backbone.js创建子菜单
用Backbone.js创建子菜单
提问于 2016-02-03 06:47:50
在使用Backbone.js和underscore.js时，尝试为菜师(第一级)创建一个子菜单列表(第二级)。
这就是我用JSON创建的菜单(我已经通过将它打印到浏览器控制台来确认它的存在)：
[
{
"name": "Sök kund",
"path":
[
{
"subName": "Fondkonto",
"subPath": "#fondkonto"
},
{
"subName": "Kassakonto",
"subPath": "#kassakonto"
},
{
"subName": "Nytt sparande",
"subPath": "#nyttsparande"
}
]
},
{
"name": "Ny kund",
"path": "#new_customer"
},
{
"name": "Dokument",
"path": "#documents"
},
{
"name": "Blanketter",
"path": "#forms"
}
]这是我在索引文件中显示的代码，目前它只打印第一级：
<script type="text/template" id="menus">
{{ _.each(menus, function(menu) { }}
<li><a href="{{= menu.path }}">{{= menu.name }}</a>
<ul>
<li>
<a href="{{= menu.path.subPath }}">{{= menu.path.subName }}</a>
</li>
</ul>
</li>
{{ }); }}
</script>如果您想知道视图和模型/集合是如何构建的：
var Menus = require("../collections/menus");
var AllMenus = Backbone.View.extend({
el: "#menuContent",
template: _.template(document.getElementById("menus").innerHTML),
initialize: function() {
"use strict";
this.menus = new Menus();
this.listenTo(this.menus, "reset", this.render);
this.menus.fetch({
reset: true,
url: "./data/menus.json",
success: function() {
console.log("Succesfully loaded menus.json file.");
},
error: function() {
console.log("There was some error trying to load and process menus.json file.");
}
});
},
render: function() {
console.log( this.menus.toJSON());
this.$el.html(this.template({ menus: this.menus.toJSON() }));
return this;
}
});
var viewMenus = new AllMenus();型号：
var Menu = Backbone.Model.extend({
defaults: {
name: "",
path: ""
}
});
module.exports = Menu;集合：
var Menu = require("../models/menu");
var Menus = Backbone.Collection.extend({
model: Menu
});
module.exports = Menus;并不是说要粘贴这么多代码，而是为了让您了解我是如何构建它的。但是我因为试图向subMenus展示却没有成功而陷入困境。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-11 21:17:13
你的数据结构错了。您不希望在字符串和数组之间切换path值。path应该始终是一个字符串，您应该创建一个新的属性来保存子菜单数组；“子菜单”将是一个好名字。此外，子菜单项不应将subName和subPath作为键名。这些对象在概念上与它们的父对象相同，它们应该具有相同的键，name和path。
修改后的数据结构应该如下所示：
var menus = [
{
"name": "Sök kund",
"path": "#",
"submenu": [
{
"name": "Fondkonto",
"path": "#fondkonto"
},
{
"name": "Kassakonto",
"path": "#kassakonto"
},
{
"name": "Nytt sparande",
"path": "#nyttsparande"
}
]
},
{
"name": "Ny kund",
"path": "#new_customer",
"submenu": []
},
{
"name": "Dokument",
"path": "#documents",
"submenu": []
},
{
"name": "Blanketter",
"path": "#forms",
"submenu": []
}
];接下来，我们将更新您的模板，以迭代顶级菜单项，并有条件地遍历它们的子菜单：
<script type="text/template" id="menus">
{{ _.each(menus, function(menu) { }}
<li>
<a href="{{= menu.path }}">{{= menu.name }}</a>
{{ if (menu.submenu && menu.submenu.length > 0) { }}
<ul>
{{ _.each(menu.submenu, function (submenu) { }}
<li><a href="{{= submenu.path }}">{{= submenu.name }}</a></li>
{{ }); }}
</ul>
{{ } }}
</li>
{{ }); }}
</script>注意:我假设您正在执行如下操作，以告诉下划线使用胡子样式语法覆盖默认模板设置。我从this answer复制了这些设置。
_.templateSettings = {
evaluate: /\{\{(.+?)\}\}/g,
interpolate: /\{\{=(.+?)\}\}/g,
escape: /\{\{-(.+?)\}\}/g
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35180153
复制
相似问题
用子菜单创建GUI
用backbone.js组织子视图？
用子菜单实现菜单
创建子菜单
创建子菜单
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
