从JSON构建菜单 [英] Build a menu from JSON
问题描述
我正在尝试构建一些动态菜单,这些菜单是通过jQuery调用JSON请求以构建菜单而动态创建的.我具有以下计划的菜单结构:
I'm attempting to build some dynamic menus that are created on the fly by calling a JSON request via jQuery to build the menu. I have the following planned menu structure:
<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为例:
and the following JSON as an example:
{"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" }
]
}
}}
做到这一点的最佳方法是什么?将要查询的网址类似于'/MenuBuilder/organisation-201.json`
What would be the best way to do this? The url that would be queried would be something like '/MenuBuilder/organisation-201.json`
我已经看过$ .getJSON方法,但是要看的是正确的东西吗?谁能提供建议等,甚至更好的例子.谢谢
I have looked at the $.getJSON method, but is the correct thing to be looking at? Can anyone offer suggestions etc or even better examples.. Thanks
这是我到目前为止尝试过的...
This is what I've tried so far...
$(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
});
推荐答案
$.getJSON
确实是可行的方法. success
回调将为您提供已经作为JavaScript对象的数据,因此您可以编写代码将其转换为DOM元素,而不必担心将其转换:
$.getJSON
is really the way to go. The success
callback will give you the data already as a JavaScript object, so you can write your code to turn it into DOM elements without worrying about converting it:
$.getJSON('/MenuBuilder/organisation-201.json',{},function(data) {
var ul = $("<ul/>")
.attr("id",data.menu.id)
.addClass(data.menu.class);
$.each(data.menu.content.menuitem, function() {
var li = $("<li/>")
.appendTo(ul)
.addClass(this.liClass);
var a = $("<a/>")
.appendTo(li)
...
});
});
或者,如果手动创建元素的工作量过多,则可以查看一些模板化插件,如Rody van Sambeek建议的那样.还没用过,所以我什么也没说.
Or, if creating the elements manually is too much work, you can look at some templating plugin like Rody van Sambeek suggested. Haven't used one yet, so I can't indicate any.
注意:我上面的示例着眼于简单性和可读性,而不是效率.通常这不会有问题,但是如果结束时太慢并且您需要优化,则建议的执行方法是使用Array.join
挂载大字符串并在其上调用$()
一次:
Note: my example above aimed at simplicity and readability, not efficiency. Usually it won't be a problem, but if it ends up too slow and you need to optimize, the recommended way of doing that is to mount a big string using Array.join
and call $()
on it once:
var html = ['<ul id="', data.menu.id, '" class="', data.menu.class, '">'];
// Keep adding elements to html as strings
// ...
html.push('</ul>');
var ul = $(html.join(''));
这篇关于从JSON构建菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!