2012-03-22 3 views
1

어떻게 jquery 템플릿을 사용하여 다음과 같은 'li'필드를 구문 분석 할 수 있습니까?jquery 템플릿에서 json에 액세스하기

<!DOCTYPE HTML> 
<html> 
     <head> 
      <meta charset="utf-8"> 
    <title>JQTsDocument</title> 
    <link rel="stylesheet" href="css/layout1.css"/> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/jquery-template.js"></script> 
    <script id="lessons" type="text/x-jquery-tmpl"> 
     <header> 
     <h1>${head1}</h1> 
     <img src="${image.source}" /> 
     <nav> 
     <ul> 
     <li> 
     {{each li}} 

     {{/each}} 
     </li> 
     </ul> 
     </nav> 
     </header> 
    </script> 
    <script type="text/javascript"> 
     var header = [{ 
      "head1" : "JQT Doc", 
      "image" : { 
       "source" : "images/logo.png", 
       "alternate" : "JQT Doc" 
      }, 
      "nav" : [{ 
       "ul" : [{ 
        "li" : "1st" 
       }, { 
        "li" : "2nd" 
       }] 
      }] 
     }]; 

     $(document).ready(function() { 
      $('#lessons').tmpl(header).appendTo('body'); 
     }); 

    </script> 
</head> 
<body></body> 

방법 "리"템플릿 내부의 각 루프를 사용하고 있음을 구문 분석하는 아무 생각 얻기없는 나는 탐색 요소에 액세스하려면 내가

답변

2

내가 당신 무엇을 생각 할 수있는 방법 찾으시는 분은

<script id="lessons" type="text/x-jquery-tmpl"> 
<header> 
<h1>${head1}</h1> 
<img src="${image.source}" /> 
<nav> 
<ul> 
<li> 
{{each nav[0].ul}} 
     <div>${li}</div> 
{{/each}} 
</li> 
</ul> 
</nav> 
</header> 
</script> 

here을 찾으실 수 있습니다.