Question

我不是JS专家，但我已经获得了使用jQuery显示的JSON模型，并且我希望jQuery模板。但是，所有文档示例似乎都是针对简单的2级数组，我无法将这些示例转换为我所拥有的JSON。我不清楚我是否应该使用 jQuery.tmpl（），或 {{each}} 或 {{tmpl}} 或 {{wrap}} 来迭代这些数据。

我需要获取下面的JSON并显示每个“主机”名称，然后显示其“状态”详细信息（CPU，磁盘，内存）。非常感谢任何有关如何继续的提示。

{"health":64,
"hosts":[
        {
        "name":"Windows2000P",
        "states":[
            {"name":"CPU","link":"(html link)","bgcolor":"#CC99CC"},
            {"name":"Disk","link":"(html link)","bgcolor":"#CC99CC"},
            {"name":"Mem","link":"(html link)","bgcolor":"#CC99CC"}
            ]
        },
        {
        "name":"Windows2003",
        "states":[
            {"name":"CPU","link":"(html link)","bgcolor":"#98FB98"},
            {"name":"Disk","link":"(html link)","bgcolor":"#98FB98"},
            {"name":"Mem","link":"(html link)","bgcolor":"#F08080"}
            ]
        },
        {
        "name":"Windows7",
        "states":[
            {"name":"CPU","link":"(html link)","bgcolor":"#98FB98"},
            {"name":"Disk","link":"(html link)","bgcolor":"#98FB98"},
            {"name":"Mem","link":"(html link)","bgcolor":"#F08080"}
            ]
        }
    ]
}

Answer 1

以下是您可能使用的模板类型的示例：

<script type="text/x-jquery-tmpl">
  <h2>${health}</h2>

  {{each hosts}}
  <h3>${name}</h3>

  <ul>
    {{each states}}
    <li style="background-color: ${bgcolor};"><a href="${link}">${name}</li>
    {{/each}}
  </ul>
  {{/each}}
</script>

使用jQuery模板处理有些复杂的JSON数据

1 个答案: