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

$.getJSON 정말로가는 길입니다. success 콜백은 자바 스크립트 객체로 이미 당신에게 데이터를 제공 할 것이다, 그래서 당신은 그것을 변환하는 방법에 대한 걱정없이 코드가 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('')); 

Answer 2

을 감사

이것은 내가 지금까지 해봤 무엇을 제안 등 또는 더 좋은 예를 제공 할 수 예, 확실히 $ .getJSON 방법 또는 긴 형식의 $를 사용할 수 있습니다 jQuery에서 .ajax 메서드.

자바 스크립트 내에서 메뉴를 생성하기 위해 어떤 종류의 템플릿 메커니즘을 사용하는 것을 고려해야합니다. JSRender https://github.com/BorisMoore/jsrender 또는 다른 JQuery 템플릿 엔진을 사용할 수 있습니다.

저는 개인적으로 KnockoutJS http://knockoutjs.com/을 선호하며 템플릿 엔진이 내장되어 있습니다. 그러나 그것은 자바 스크립트 템플릿을 만드는 것보다 훨씬 더 많은 것을 제공합니다.