在 jquery 模板中访问 json答案

【问题标题】：accessing json in jquery template在 jquery 模板中访问 json
【发布时间】：2012-04-06 20:44:16
【问题描述】：

如何使用 jquery 模板从以下解析特定的“li”字段？

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

不知道如何使用模板中的每个循环解析“li”，如果我想访问导航元素，我该怎么做

【问题讨论】：

标签： json parsing jquery jquery-templates

【解决方案1】：

我想你要找的是这个

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

【讨论】：