使用 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;

并不是要粘贴这么多代码，而是为了让您了解我是如何构建它的。但是我试图显示我的子菜单却没有成功。

Answer 1

您的数据结构错误。您不想为您的 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>

注意：我假设您正在执行以下操作来告诉 Underscore 使用 Mustache 样式语法覆盖默认模板设置。我从this answer复制了这些设置。

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