Erstellen Sie ein Menü von JSON

Question

Ich versuche, einige dynamische Menüs zu erstellen, die während des Betriebs erstellt werden, indem Sie eine JSON-Anforderung über jQuery aufrufen, um das Menü zu erstellen. Ich habe folgende geplante Menüstruktur:

<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> 

und die folgende JSON als Beispiel:

{"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" } 
    ] 
    } 
}} 

Was wäre der beste Weg, dies zu tun? Die URL, die abgefragt werden würde, wäre etwas wie '/ MenuBuilder/organisation-201.json`

Ich habe die $ .getJSON-Methode angeschaut, aber ist die richtige Sache zu betrachten? Kann jemand Vorschläge usw. oder sogar bessere Beispiele bieten .. Danke

Das ist, was ich bisher ... Ja

$(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

$.getJSON ist wirklich der Weg zu gehen. Der success Rückruf wird Ihnen die Daten bereits als JavaScript-Objekt, so können Sie schreiben Ihren Code es in DOM-Elemente zu drehen, ohne sich um sie zu konvertieren:

$.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) 
      ... 
    }); 
}); 

Oder, wenn die Elemente manuell zu erstellen zu viel Arbeit , können Sie sich ein Template-Plugin ansehen, wie es Rody van Sambeek vorgeschlagen hat. Habe noch keinen benutzt, also kann ich keinen angeben.

Hinweis: mein Beispiel oben auf Einfachheit und Lesbarkeit ausgerichtet, nicht Effizienz. Normalerweise wird es kein Problem sein, aber wenn es am Ende zu langsam, und Sie müssen optimieren, ist die empfohlene Art und Weise, dies zu tun ist eine große Zeichenfolge zu montieren Array.join und ruft $() auf einmal:

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('')); 

Answer 2

versucht haben, können Sie auf jeden Fall die $ .getJSON Methode verwenden oder den Langschrift $ .ajax-Methode von JQuery.

Sie sollten in Erwägung ziehen, eine Art Templating-Mechanismus zu verwenden, um das Menü innerhalb von Javascript zu generieren. Sie können JSRender https://github.com/BorisMoore/jsrender oder eine andere JQuery-Templating-Engine verwenden.

Ich persönlich bevorzuge KnockoutJS http://knockoutjs.com/, die einen eingebauten Templating-Engine hat. Aber es hat viel mehr zu bieten als nur Javascript Templating.