jQuery的模板，以顯示JSON數據轉換成HTML格式

我是有困難的使用查詢模板的顯示一些JSON數據：jQuery的模板，以顯示JSON數據轉換成HTML格式

這裏是我的代碼：

這是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鏈接顯示數據時，什麼也沒有顯示。我想知道如果我創建的模板是錯誤的。有什麼建議麼？

來源

2013-01-15 swaggyP

你看到日誌中有任何錯誤嗎？ – insomiac

模板html結構無效'H2'或'H3'或'OL'不能是'LI'的兄弟 – charlietfl

您可以檢查控制檯中是否有任何javascript錯誤，它似乎在這裏工作正常http：// jsfiddle。 net/arunpjohny/P3JKY/ –

代碼似乎很好。我認爲getJSON需要更長的時間才能返回信息，並且您的代碼在完成之前正在執行appendTo命令。您可以使用延遲jQuery中（即當....然後）或使用$阿賈克斯和使用它的成功方法模板在信息象下面這樣：

$.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-15 04:48:57 Sangeeta

謝謝！我想試着讓這個工作沒有Ajax。所以我試着推遲：$ .when（$。getJSON（'intrislam.json'））.then（function（info）{ – swaggyP

jQuery的模板，以顯示JSON數據轉換成HTML格式

回答

相關問題