Question

如何使用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”，如果我想访问nav元素，我该怎么做

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

在jquery模板中访问json

1 个答案: