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> 

、私はすべてのデータを表示するための多くの方法を試してみましたが、私はそれを表示することはできませんよ。

私はそれを行うハンドルバーの方法を知りたい。

Answer 1

データにはオブジェクトの配列が含まれていますので、eachヘルパーを使用してください。オブジェクトを反復処理する場合は、each-in helperを使用します。 data.data.[0]を使用することにより

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

Answer 2

、あなたは常に最初のオブジェクトを取得しています。

あなたは、ページネーションをソートなどの追加機能を使用する場合は、

{{#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

を以下のようにコードを更新し、テーブルと一緒になどをフィルタリング、あなたは燃えさしモデルのテーブルを使用することができ、

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

ここでデモを見ることができます。