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

How to display a JS object with underscore templates?

本文关键字：下划线 对象 JS 何显示 显示      更新时间：2023-09-26

我将使用下划线模板显示数据的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"
    }
  ]
}

}]；

我正在读取对象并将其绑定到像这样的模板上——它使用这个

 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>

到目前为止，我没有得到任何错误，但模板渲染，但只显示[对象对象]，所以我认为它几乎在那里。我试着使用点表示法（item.country），但我仍然需要弄清楚如何循环显示它。有什么想法吗？

更改

$("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只有一个属性：country。与其用items调用模板，不如用items.country调用它。由于循环中有密钥，因此可以在每次迭代中访问对象。每个对象还返回一个tarifTypes数组等。因此，您可能也不需要迭代这些。

我也创造了这把小提琴。尽管它与_ templates没有直接关系，但它仍然可以让您了解如何迭代JS对象。

干杯，=]

相关文章：