jquery - 从 JSON 构建菜单

Question

我正在尝试构建一些动态菜单，这些菜单是通过 jQuery 调用 JSON 请求来构建菜单来动态创建的。我有以下计划的菜单结构:

<ul class="menu">
    <li>
        <a href="/Organisations/201/NewJournalEntry" title="New Journal Entry">
            <span class="icon journal-new">New Journal Entry</span>
        </a>
    </li>
    <li>
        <a href="/Organisations/201/People" title="View People">
            <span class="icon people">People</span>
        </a>
    </li>
    <li class="sep">
        <a href="/Organisations/201/Edit" title="Edit">
            <span class="icon edit">Edit</span>
        </a>
    </li>
</ul>

以下 JSON 为例:

{"menu": {
  "id": "organisation-201",
  "class": "menu",
  "content": {
    "menuitem": [
      {"text" : "New Journal Entry", "title" : "New Journal Entry", "href" : "/Organisations/201/NewJournalEntry", "liClass" : "", "icon" : "icon journal-new" },
      {"text" : "View People", "title" : "View People", "href" : "/Organisations/201/People", "liClass" : "", "icon" : "icon people" },
      {"text" : "Edit", "title" : "Edit", "href" : "/Organisations/201/Edit", "liClass" : "sep", "icon" : "icon edit" }
    ]
  }
}}

最好的方法是什么？查询的 url 类似于“/MenuBuilder/organization-201.json”

我已经查看了 $.getJSON 方法，但是查看的内容正确吗？任何人都可以提供建议等甚至更好的例子..谢谢

这是我到目前为止所尝试过的...

$(document).ready(function() {

                // First we connect to the JSON file
                $.getJSON('menu.json', function(data)
                {
                    // Setup the items array
                    var items = [];
                    // For each line of data
                    $.each(data, function(key, val)
                    {
                        items.push('<li class="' + liClass + '"><a href="' + href + '"><span class="' + icon +'">' + text + '</span></a></li>');
                    });

                    $('<ul/>', {
                        html: items.join('')
                    }).appendTo('#buildHere');

                });

                // END json

            });

Answer 1

是的，您绝对可以使用 JQuery 中的 $.getJSON 方法或普通的 $.ajax 方法。

您应该考虑使用某种模板机制从 JavaScript 中生成菜单。您可以使用 JSRender https://github.com/BorisMoore/jsrender或其他 JQuery 模板引擎。

我个人更喜欢KnockoutJS http://knockoutjs.com/它有一个内置的模板引擎。但它提供的不仅仅是 JavaScript 模板。