Question

我在使用查询模板显示一些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链接显示数据时，没有任何内容出现。我想知道我创建的模板是否有问题。有什么建议？

Answer 1

代码似乎很好。我认为getJSON需要更长的时间来返回信息，你的代码在完成之前执行appendTo命令。你可以在jquery中使用deferred（即当....）或使用$ .ajax并使用其成功方法来模拟如下信息：

   $.ajax({
            type: "POST",
            url: 'ppt.json',
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (info) {
                 $('#header').empty();
                $('#ititemplate').tmpl(info).appendTo('#header');   
            },
            error: function (jqXHR, textStatus, errorThrown) {
                //failure function goes here..
            }
        });

希望它有所帮助。

jQuery模板化将JSON数据显示为格式化的HTML

1 个答案: