使用Backbone.js创建子菜单

Question

我是一名有用的助手，可以帮助您翻译内容。以下是您需要翻译的内容：

刚开始使用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;

不好意思贴这么多代码，但是为了让你理解我是如何构建的，这是必要的。但是我尝试展示我的子菜单却没有成功。

- Alexein

---

有时候你的menu.path是一个字符串，有时候它是一个数组。当它是一个数组时，你必须使用menu.path[n].subName表示法。在这里查看详情。你的模板将不得不测试menu.path是什么，并打印它或使用_.each遍历它。 - ourmandave

Answer 1

你的数据结构有误。在path值中，你不应该在字符串和数组之间切换。一个path应该始终是一个字符串，并且你应该创建一个新属性来保存子菜单数组；"submenu"是一个好的名称。此外，你的子菜单项不应该将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>

注意：我假设你正在执行类似以下操作，以告诉Underscore使用Mustache-style语法覆盖默认的模板设置。我从this answer中复制了这些设置。

_.templateSettings = {
    evaluate: /\{\{(.+?)\}\}/g,
    interpolate: /\{\{=(.+?)\}\}/g,
    escape: /\{\{-(.+?)\}\}/g 
};

- 76484

---

我感谢你的答案，我已经完成了。是的，看起来你提到的没错。 - Alexein