1

クエリテンプレートを使用して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リンクをクリックしてデータを表示しても、何も表示されません。作成したテンプレートに問題があるのではないかと思います。助言がありますか？

4

1 に答える 1

0

コードは問題ないようです。getJSON が情報を返すのに時間がかかり、コードが終了する前に appendTo コマンドを実行していると思います。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..
            }
        });

それが役に立てば幸い。

于 2013-01-15T04:48:57.043 に答える