javascript - 如何使用 handlebarsjs 在表格中显示数据

Question

我正在创建我的第一个 emberjs 项目，我正在使用 handlebarsjs 作为模板引擎，我正在使用这种格式的 ajax 调用从服务器获取数据:

{"data":[{"ownerName":"dubey","houseNo":"s17/261","streetName":"chinchwad","areaName":"thergaon","city":"pune","pinZip":"221003","stateProvince":"maharastra","country":"india","shaded":"yes","lat":null,"lon":null,"rate":"29","status":"open","availibility":"open","contactNo":null,"id":"589704c2a924113eb8841952"},{"ownerName":"dubey","houseNo":"s17/261","streetName":"chinchwad","areaName":"thergaon","city":"pune","pinZip":"221003","stateProvince":"maharastra","country":"india","shaded":"yes","lat":null,"lon":null,"rate":"29","status":"open","availibility":"open","contactNo":null,"id":"58971125df1e11416e91ccc3"}]}

我的模板是:

<tbody>
      {{#each data.data}}
    <tr>
      <th>{{data.data.[0].houseNo}}</th>
      <th>{{data.data.[0].houseNo}}</th>
      <th>{{data.data.[0].streetName}}</th>
      <th>{{data.data.[0].areaName}}</th>
      <th>{{data.data.[0].city}}</th>
      <th>{{data.data.[0].pinZip}}</th>
      <th>{{data.data.[0].stateProvince}}</th>
      <th>{{data.data.[0].country}}</th>
      <th>{{data.data.[0].shaded}}</th>
      <th>{{data.data.[0].rate}}</th>
      <th>{{data.data.[0].status}}</th>
      <th>{{data.data.[0].availibility}}</th>
      <th>{{data.data.[0].ownerName}}</th>
      <th>{{data.data.[0].contactNo}}</th>
    </tr>
    {{/each}}
  </tbody>

它只显示所有行中的第一个数据，我尝试了很多方法来显示所有数据，但我无法显示它。

我想知道 Handlebars 的操作方式。

Answer 1

您的数据包含对象数组，因此请使用 each 帮助程序。如果你想迭代对象然后使用 each-in helper .

{{#each  data.data as |row|}}
 {{each-in row as |key value|}}
<tr>
      <th>{{value}}</th>
</tr>
 {{/each-in}}
{{/each}}