일부 데이터가로드되지 않을 때 Ember.js의 화면을 부분 렌더링합니다.

Question

Ember.RSVP.hash을 사용하여 몇 군데의 데이터를로드하는 모델이있는 Ember 경로가 있습니다. 백엔드에서 다른 API 경로를 호출의 결과 각 :

export default Ember.Route.extend(AuthenticatedRouteMixin, { 
    model() { 
     return Ember.RSVP.hash({ 
      profile: this.store.queryRecord('profile', {}), 
      subscriptions: this.store.findAll('subscription'), 
      packages: this.store.findAll('package'), 
     }); 
    }, 
}); 

제가하는 데 문제는 데이터의 어떤이 호출 할 때 전체 템플릿이로드에 실패, 오류가 발생한다는 것입니다. 내가 대신하고 싶은 것은 오류가 발생하더라도 사용할 수있는만큼 많은 데이터를 표시하는 것입니다.로드 할 수없는 부분은 적절한 유형의 빈 모델로 표시됩니다 (몇 가지 추가 오류 정보 포함). 그러나, 나는 이것을 할 수없는 것 같습니다. 경로에 오류 처리기를 추가하려고 시도했지만 오류 처리기에서 오류가 발생해도 전환을 계속할 수있는 방법이없는 것 같습니다.

Answer 1

하나의 가능성은 그러한 정보를 얻기 위해 서비스를 이용하는 것입니다. 모델이 완전히로드되지만로드 된 후에 서비스의 데이터가 표시됩니다. 이 (같은 저자 http://emberigniter.com/should-components-load-data/에서도) 데이터를 검색하기 위해 하나 개 이상의 다른 서비스를 사용하는지 여부를

, 나는 경로에서 아래로 데이터를 전달 제안 http://emberigniter.com/render-promise-before-it-resolves/

Answer 2

를 살펴 보자. 템플릿은 별도의 요청으로 구성 요소에 제공된 모델을 채워 부분적으로 렌더링 할 수 있습니다. 이런 종류의 코드를 작성하는 좋은 장소는 setupController입니다. 일반적으로 두 컴포넌트 (예 : 특정 광고를 표시하는 구성 요소)간에 논리적 인 결합이있는 경우에만 구성 요소의 서비스 호출을 추가합니다.

거친 예를 들어, http://emberjs.jsbin.com/netesehasi/1/edit?html,js,output

JS

... 
App.IndexRoute = Ember.Route.extend({ 
    model:function(){ 
    return {dataForA:null,dataForB:null,dataForC:null}; 
    }, 
    setupController:function(controller,model) { 
    this._super.apply(arguments); 

    // simulate fetching data 
     setTimeout(function(){ 
     Ember.set(model,'dataForA', 'this is data for component a'); 
     controller.set('model', model); 
     },2000); 

     setTimeout(function(){ 
     Ember.set(model,'dataForB', 'this is data for component b'); 
     controller.set('model', model); 
     },1000); 

     setTimeout(function(){ 
     Ember.set(model,'dataForC', {error:'error for component c'}); 
     controller.set('model', model); 
     },3000); 



    } 
}); 
... 

HBS

... 
<script type="text/x-handlebars" data-template-name="components/comp-a"> 
{{#if data}} 
    {{data}} 
    {{else}} 
    loading... 
    {{/if}} 
    </script> 

    <script type="text/x-handlebars" data-template-name="components/comp-b"> 
    {{#if data}} 
    {{data}} 
    {{else}} 
    loading... 
    {{/if}} 
    </script> 

    <script type="text/x-handlebars" data-template-name="components/comp-c"> 
    {{#if data}} 
    {{#if data.error}} 
     {{data.error}} 
    {{else}} 
     {{data}} 
    {{/if}} 
    {{else}} 
    loading... 
    {{/if}} 
    </script> 
...