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

Question

I was having difficulty displaying some json data with use of query template:我在使用查询模板显示一些 json 数据时遇到了困难：

Here is my code:这是我的代码：

This is the 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": ""
                }
            ]
        }
    ]
}

Here is the JavaScript:这是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>

So, I am not sure what is wrong.所以，我不确定出了什么问题。 When I click on the html link to display the data, nothing appears.当我单击 html 链接以显示数据时，什么也没有出现。 I am wondering if the template I created is faulty.我想知道我创建的模板是否有问题。 Any suggestions?有什么建议么？

Answer 1

code seems fine.代码看起来不错。 i think getJSON taking longer to return info and your code is executing appendTo command before it finishes.我认为 getJSON 需要更长的时间来返回信息，并且您的代码在完成之前正在执行 appendTo 命令。 you can use deferred in jquery (ie when....then) or use $.ajax and use its success method to template over info like below:您可以在 jquery 中使用 deferred（即 when....then）或使用 $.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..
            }
        });

hope it helps.希望能帮助到你。

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

问题描述

1 个解决方案

解决方案1
0 2013-01-15 04:48:57

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

问题描述

1 个解决方案

解决方案1 0 2013-01-15 04:48:57

解决方案1
0 2013-01-15 04:48:57