我正在尝试构建一些通过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" }
]
}
}}
最好的方法是什么?将被查询的网址类似于'/ 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
});
答案 0 :(得分:2)
是的,你绝对可以使用$ .getJSON方法或JQuery中的long。$ .ajax方法。
你应该考虑使用某种模板机制从javascript中生成菜单。您可以使用JSRender https://github.com/BorisMoore/jsrender或其他JQuery模板引擎。
我个人更喜欢具有构建模板引擎的KnockoutJS http://knockoutjs.com/。但它提供的不仅仅是javascript模板。
答案 1 :(得分:1)
$.getJSON
真的是要走的路。 success
回调将为您提供已作为JavaScript对象的数据,因此您可以编写代码将其转换为DOM元素,而无需担心转换它:
$.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建议的一些模板插件。尚未使用过,所以我不能指出任何一个。
注意:我的上述示例旨在简化和提高可读性,而非效率。通常它不会是一个问题,但如果它太慢并且您需要优化,建议的方法是使用Array.join
挂载一个大字符串并在其上调用$()
:
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(''));