2012-03-22 43 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