/ / Zugreifen auf JSON in JQuery-Vorlage - JSON, Parsing, JQuery, JQuery-Vorlagen

Zugreifen auf JSON in JQuery-Vorlage - JSON, Parsing, JQuery, JQuery-Vorlagen

Wie kann ich das bestimmte "li" -Feld aus den folgenden mit jquery Vorlage analysieren?

<!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="/images/${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>

Keine Ahnung, wie man dieses "li" mit jeder Schleife in der Vorlage analysiert und ob ich auf die nav-Elemente zugreifen möchte, wie kann ich das tun

Antworten:

2 für die Antwort № 1

Ich denke, wonach Sie suchen, ist dies

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

Sie können ein funktionierendes Beispiel finden Hier.