如何在JSON數據中使用jQuery模板？

我想寫一些jQuery代碼從雲帳戶檢索服務器列表，並將它們顯示在表中。當我加載我的頁面時，我的JavaScript執行並返回正確的JSON，但是當我嘗試使用jquery模板生成我的html時，我從來沒有得到任何輸出。任何人都可以幫我弄清楚我的問題在哪裏？如何在JSON數據中使用jQuery模板？

Javascript功能來獲取服務器數據

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.ajax({ 
      url: '../../api/server/getservers', 
      type: 'POST', 
      success: function (result) { 
       $('#serverTemplate').tmpl(result).appendTo('#serverTable'); 
      }, 
     }); 
    }); 
</script>

jQuery的模板的Javascript

<script id="serverTemplate" type="text/x-jQuery-tmpl"> 
    {{each servers}} 
     <tr> 
      <td>${status}</td> 
      <td>${name}</td> 
     </tr> 
    {{/each}} 
</script>

HTML

<table> 
    <thead> 
     <tr> 
      <th>Status</th> 
      <th>Server Name</th> 
     </tr> 
    </thead> 
    <tbody id="serverTable"> 

    </tbody> 
</table>

JSON例

{ 
    "servers": [ 
     { 
      "progress": 100, 
      "id": 11111111, 
      "imageId": 1, 
      "flavorId": 1, 
      "status": "ACTIVE", 
      "name": "SERVER-1", 
      "hostId": "abcdefghijklmnopqrstuvwxyz", 
      "addresses": { 
       "public": [ 
        "1.1.1.1" 
       ], 
       "private": [ 
        "2.2.2.2" 
       ] 
      }, 
      "metadata": {} 
     }, 
     { 
      "progress": 100, 
      "id": 22222222, 
      "imageId": 2, 
      "flavorId": 2, 
      "status": "ACTIVE", 
      "name": "Server-2", 
      "hostId": "zxywufvslakdkdkdkdkdkdkdkdk", 
      "addresses": { 
       "public": [ 
        "3.3.3.3" 
       ], 
       "private": [ 
        "4.4.4.4" 
       ] 
      }, 
      "metadata": {} 
     } 
    ] 
}

的jQuery 1.5.1版
jQuery的TMPL 版Beta 1的

來源

2011-06-28 GregB

如果處理ajax請求沒有問題，我沒有看到任何其他問題。它工作正常我..檢查http://jsfiddle.net/E2cKh/ – Chandu

JSON解析罰款嗎？我想知道我是否錯過了一個JSON解析庫或類似的東西？我在下面發佈了我的答案，但聽說我的原始代碼爲您工作很有趣。 – GregB

我通過改變成功的功能和增加的明確的解析解決問題將JSON轉換爲數組。

var servers = jQuery.parseJSON(result); 
$('#serverTemplate').tmpl(servers).appendTo('#serverTable');

來源

2011-06-28 15:49:14 GregB

如何在JSON數據中使用jQuery模板？

回答

相關問題