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"}]}

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

我想知道把手的做法。

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}}

Answer 2

使用data.data.[0]，您始终会检索第一个对象。

将您的代码更新为以下

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

Answer 3

如果您想要其他功能，如排序，分页，过滤等，那么您可以使用ember models表，

https://github.com/onechiporenko/ember-models-table

你可以在这里找到演示，

http://onechiporenko.github.io/ember-models-table/

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

3 个答案: