emberでAPI応答を解析できません

Question

EmberJSを学習して復元しようとしています。

{"products":[{"id":1,"name":"lappy1"},{"id":2,"name":"lappy2"}]} 

私は自分のブラウザのネットワークログに取得しています。この応答：私は、次の応答でgetメソッドのAPIを持っています。

マイ製品のルートが似ている：

import Ember from 'ember'; 
     export default Ember.Route.extend({ 
      model() { 
       return { 
        products :this.get('store').findAll('product') 
       }; 
      } 
     }); 

マイproduct.hbsです：

<div> 
<div class="row"> 
    <div class="col-md-4"><b>id</b></div> 
    <div class="col-md-4"><b>Name</b></div>  
</div> 
{{#each model.products as |product|}} 
    <div class="row"> 
     <div class="col-md-4">{{product.id}}</div> 
     <div class="col-md-4">{{product.name}}</div> 
    </div> 
{{/each}} 
</div> 

私の製品モデルは次のとおりです。ログにはエラーはありません

import DS from 'ember-data'; 

export default DS.Model.extend({ 
    name: DS.attr('string') 
}); 

、私のページにはヘッダー部分のみが表示されます。つまり、

<div class="col-md-4"><b>id</b></div> 
<div class="col-md-4"><b>Name</b></div> 

どのようなものがありますか？

Answer 1

Chrome Emberプラグインをインストールし、Chromeをデバッグに使用します。

あなたはRESTAdapterを使用していると仮定しますか？

あなたのRouteのmodelフックは、約束ではなく、オブジェクトを返します。これは少し奇妙ですが、私はハッシュを使用することをお勧めします：

model() { 
    return Ember.RSVP.hash({ 
    products: this.store.findAll('product') 
    }); 
} 

代わりに、あなただけの店を呼び出した結果を返すことができます：

model() { 
    return this.store.findAll('product'); 
} 

しかし、この場合には、あなたのテンプレートを変更しますmodel.productsの代わりにmodelを使用するだけです。