비동기 데이터를 기반으로 Ember의 계산 된 속성

Question

async, hasMany 모델 속성의 값을 기반으로 계산 된 속성을 사용하려고하지만 내보기에 표시 할 수 없습니다. 내보기에서

MyApp.Foo = DS.Model.extend({ 

    title: DS.attr('string'), 
    peeps: DS.hasMany('peep', { async: true }); 

}); 

MyApp.Peep = DS.Model.extend({ 

    name: DS.attr('string'), 
    email: DS.attr('string') 

}); 

MyApp.Foo.FIXTURES = [ 

    { id: 1, title: 'nice', peeps: [1,2] } 

]; 

MyApp.Peep.FIXTURES = [ 

    { id: 1, name: 'mypeep', email: 'peep@example.com' }, 
    { id: 2, name: 'mypeep2', email: 'peep2@example.com' } 

]; 

MyApp.FooController = EmberObjectController.extend({ 

    showPeeps: function() { 

     // This one works for this test data. 
     // return [{name: 'baz', email: 'bar'}]; 

     var peepList = this.get('content.peeps.[]').then(function(c) { 

      // This one does not work, even for this test data. 
      return {name: 'baz', email: 'bar'}]; 

     }); 

    }.property('content.peeps.[]'); 

}); 

의 라인을 따라 뭔가 : 나는 모든 데이터를 볼 수 있습니다

{#each peep in controller.showPeeps}}{{peep.name}}{{/each}} 

"다음()"을 console.log()를 사용하고,이에 나타냅니다으로 코드 주석, "then()"에서 반환을 취하면 작동하지만 비동기로 반환되기 때문에 실제 데이터는 비어 있습니다. 정의되지 않은

의 메소드를 호출 할 수 없습니다 '해결'나는 (사용 @each을 사용하여 계산 된 속성 코드의 많은 변종을 시도했다 : 나는 그것이 아닌 비동기 만들려고하면, 나는

catch되지 않은 형식 오류를 얻을 수 model.peeps - 모두 올바르게 console.log()에서 데이터를 보여 주지만 뷰에서는 보이지 않는다. 뷰에서, then()의 바깥쪽에 더미 데이터를 리턴하지 않으면 뷰는 항상 정의되지 않는다.

무엇이 누락 되었습니까?

Answer 1

약속으로 hasMany 관계를 취급하지 말고 배열로 취급하십시오. 그것이 바로 DS.PromiseArray의 요지입니다. 사용자를 원한다면 계산 된 속성에 신경 쓰지 말고 템플릿에 peeps 만 사용하면됩니다. 그러나 데이터를 어떻게 든 변환해야하는 경우 map을 사용하십시오.

showPeeps: function() { 
    return this.get('peeps').map(function(peep) { 
     return { name: peep.name, email: peep.email }; 
    }); 
}.property('peeps.@each') 

또한 [] 속성을 보지 마십시오. 이는 항목이 배열에 추가되거나 제거 될 때만 업데이트됩니다. 배열 내용이 변경되지 않으면 내용의 내용이 변경됩니다. 대신 @each 속성을 봐야합니다. 또한 속성 이름 끝에 []을 추가 할 필요가 없으며 속성 앞에 content.을 추가 할 필요가 없습니다.