Как использовать шаблоны jquery с данными JSON? - PullRequest
Новая
       10

Как использовать шаблоны jquery с данными JSON?

2 голосов
/ 28 июня 2011

Я пытаюсь написать код jquery, чтобы получить список серверов из учетной записи в облаке и отобразить их в таблице. Когда я загружаю свою страницу, мой javascript выполняется и возвращается правильный JSON, но когда я пытаюсь использовать шаблон jquery для генерации моего html, я никогда не получаю никакого вывода. Может кто-нибудь помочь мне выяснить, где моя проблема?

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 Template 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 версия бета 1

1 Ответ

1 голос
/ 28 июня 2011

Я решил проблему, изменив функцию успеха и добавив явный анализ JSON в массив. 

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