2016-12-09 4 views
0

EmberJS를 배우고 복원하려고합니다.에머리에서 API 응답을 구문 분석 할 수 없습니다.

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

내가 누락 된 것이 있습니까?

답변

0

Chrome Ember 플러그인을 설치하고 Chrome을 사용하여 디버깅합니다.

RESTAdapter를 사용하고 있다고 가정합니까?

Routemodel 후크는 약속이 아닌 개체를 반환합니다.

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

그러나이 경우

, 당신이 당신의 템플릿을 변경할 것입니다 : 당신은 그냥 가게를 호출 한 결과를 반환 할 수

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

다른 방법이 내가 해시를 사용하는 것이 좋습니다 것, 조금 이상하다 model.products 대신 model을 사용하면됩니다.

+0

감사합니다. Ember.RSVP.hash를 사용해야하는 이유를 말해 줄 수 있습니까? – AkshayP

+0

'hash'는 약속을 반환합니다. 'model' hook에서 non-promise (평범한 객체)를 반환하면 Ember는 해상도를 기다리지 않습니다. 마찬가지로'findAll'도 Promise를 반환합니다. 좀 더 복잡한 모델을 사용하지 않는다면, 필자는 제 대답에 표시된'model'의 두 번째 예제를 추천합니다. HTH –