javascript - 如何显示带有下划线模板的 JS 对象？

Question

我想使用下划线模板显示一个 JS 数据对象。我似乎无法弄清楚如何钻取对象以获取国家/地区名称或其他日期(例如 tarrifType)并使用我的模板显示它。该对象看起来像这样...

var items = [
{
"country": {
  "China": [
    {
      "tarrifType": "China Pass",
      "fixLine": "23p",

    },
    {
      "tarrifType": "Monthly plan",
      "fixLine": "3p",
    }
  ],
  "Australia": [
    {
      "tarrifType": "Pay as you go",
      "fixLine": "73p"
   },
    {
      "tarrifType": "Australia Pass",
      "fixLine": "49p",

    },
    {
      "tarrifType": "Monthly plan",
      "fixLine": "20p",

    }
  ],     
  "Nigeria": [
    {
      "tarrifType": "Pay as you go",
      "fixLine": "73p"
    },
    {
      "tarrifType": "Nigeria Pass",
      "fixLine": "49p"
    }
  ]
}

} ];

我正在读取对象并将其绑定(bind)到像这样的模板

 var tableTemplate = $("#table-data").html();

 $("table.outer tbody").html(_.template( tableTemplate, {items:items} ));

我正在使用这个下划线模板...

<script type="text/html" id='table-data'>
<% _.each(items,function(item,key,list){ %>
<tr>
    <td></td>
    <td><%- item.country %></td>
</tr>
<% }) %>
</script>

到目前为止，我没有收到任何错误，但模板呈现但只显示 [object Object]，所以我认为它就快到了。我尝试使用点符号 (item.country)，但我仍然需要弄清楚如何遍历它并显示。有什么想法吗？

Answer 1

改变

$("table.outer tbody").html(_.template( tableTemplate, {items:items} ));

到

$("table.outer tbody").html(_.template( tableTemplate, {items:items.country} ));

还有变化

<td><%- item %></td>

到

<td><%- country[key].tarrifType %></td>

元素只有一个属性:国家。不要使用 items 调用模板，而是使用 items.country 调用它。由于您在循环中拥有 key ，因此您可以在每次迭代中访问该对象。每个对象还返回一个 tarrifTypes 等数组。因此您可能/可能不需要迭代这些。

我还创建了 this fiddle .虽然它与 _ 模板没有直接关系，但它仍然可以让您了解如何遍历 JS 对象。

干杯，=]