我在使用查询模板显示一些 json 数据时遇到了困难:
这是我的代码:
这是json:
{
"title": "The ppt presenation",
"date_created": "9242010",
"last_modified": "9242011",
"author": "Mistic Frenzies",
"slides": [
{
"Slide": "1",
"header": "sdfsdf",
"src": "ghkkgh.jpg",
"Content": [
{
"bullet": ""
},
{
"bullet": ""
},
{
"bullet": ""
},
{
"bullet": ""
},
{
"bullet": ""
}
]
},
{
"Slide": "2",
"header": "sdfsdf",
"src": null,
"Content": [
{
"bullet": ""
},
{
"bullet": ""
},
{
"bullet": ""
},
{
"bullet": ""
},
{
"bullet": ""
}
]
},
{
"Slide": 3,
"header": "dsggd",
"src": "sdfsdf.jpg",
"Content": [
{
"bullet": ""
},
{
"bullet": ""
},
{
"bullet": ""
},
{
"bullet": ""
},
{
"bullet": ""
}
]
}
]
}
这是JavaScript:
<head>
<style type="text/css"></style>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script id="ititemplate" type="text/x-jquery-tmpl">
<h2>${title}</h2>
<li>${author}</li>
{{each slides}}
<h3>${header}</h3>
<li>${slide}</li>
<ol>
{{each Content}}
<li style="background-color:#98FB98;">${bullet}</li>
{{/each}}
</ol>
{{/each}}
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#powerpoint').click(function() {
//var jsonloc = "ppt.json";
$.getJSON('ppt.json',function(info){
$('#header').empty();
$('#ititemplate').tmpl(info).appendTo('#header');
});
});
});
</script>
</head>
<body>
<a href="#" id="powerpoint">Powerpoint</a>
<div id="header">
</div>
</body>
所以,我不确定出了什么问题。当我单击 html 链接以显示数据时,什么也没有出现。我想知道我创建的模板是否有问题。有什么建议么?