약속을 해결해도 템플릿에 데이터가 표시되지 않습니다.

Question

템플릿을 만들 때 params로 여러 개의 버전을 만들거나 시도해 보았습니다.

모든 console.log는 적절한 값을 제공하므로 약속은 이입니다. 문제 나는 (그 다음은 질문입니다.) 해결 값을 내 서식 파일로 반환하는 방법입니다. 내 템플릿에

// in controller.js 
testA: Ember.computed('sessionAccount.account.id', function() { 
    let _this = this; 
    let promise = new Ember.RSVP.Promise(function(resolve, reject) { 
     _this.get('store').findAll('accounts2workgroup').then(function(a2ws) { 
      let workgroups = []; 
      a2ws.forEach(function(a2w){ 
       if(a2w.get('rights')>1) { 
        workgroups.push(a2w.get('workgroup')); 
       } 
      }); 
      console.log(workgroups); 
      _this.set('wgAsAdmin', workgroups); // this works 
      resolve(Ember.A(workgroups)); //=> [Object] in rendered template 
      // return workgroups; // no, not that way 
     }); 
    }); 

    promise.then(function(data) { 
     console.log('did resolve'); 
     console.log(data); 
    }) 

    return promise; 
}).property('sessionAccount.account.id'), 

testB: Ember.computed('sessionAccount.account.id', function() { 
    return new Ember.RSVP.Promise(function(resolve, reject) { 
    let workgroups = Ember.ArrayProxy.create([{'label': 'TestB Label'}]); 
     resolve(workgroups); 

    }); 
}), 

testC: Ember.computed(function() { 
    return this.store.findAll('artists2workgroup').then(function(a2ws) { 
      let workgroups = []; 
      a2ws.forEach(function(a2w){ 
       if(a2w.get('rights')>1) { 
        workgroups.push(a2w.get('workgroup')); 
       } 
      }); 
      console.log(workgroups); 
      return workgroups; //=> [Object] in rendered 
    }); 
}), 

testD: Ember.computed(function() { 
    return this.store.findAll('workgroup'); // this of course works, but that's not what I want... 
}), 

내 모든 시험과 같이 테스트 :

<h4>TestB</h4> 
{{#each testB as |wg|}} 
     {{wg}}<br> 
     {{wg.label}}<br> 
{{/each}} 
testB: {{testB}}<br> 
testB.length: {{testB.length}}<br> 

모든 (그러나 마지막 testD 분명히)

에 렌더링 여기

는 내가 해봤 버전입니다

를 TestB
를 TestB : [개체 개체]
testB.length : ember1117 >
BB-추진
를 TestB : < DS.PromiseObject 내가 기대/것이지만

그들을

를 TestB
< DS.PromiseObject을 보여주고 싶은 : ember1117 >
testB.length : 1

f.e를 해결할 때 다른 속성을 설정할 수있는 방법이 있지만 올바른 방법으로이 작업을 수행하는 방법을 알고 싶습니다. 그리고 나는이 예제들이별로 의미가 없다는 것을 알고 있습니다. 기본 기능 일 뿐이며 일단 실행하면 기능이 향상됩니다.

Answer 1

먼저 explicit promise construction antipattern을 피하십시오! ember-cli에 화살표 기능이 있으므로 this을 저장할 필요가 없습니다.

testA: Ember.computed('sessionAccount.account.id', function() { 
    return this.get('store').findAll('accounts2workgroup').then(a2ws => { 
     return workgroups 
      .filter(a2w => a2w.get('rights') > 1) 
      .map(a2w => a2w.get('workgroup')) 
    }); 
}).property('sessionAccount.account.id'), 

지금이 작동하지 않습니다 : 그래서 당신의 testA 재 작성 할 수 있습니다. 여기서 문제는 엠버 템플릿이 약속을 인식하지 못한다는 것입니다. 따라서 세 가지 옵션이 있습니다.

1. 그냥하지 마세요. 종종 model 후크를 사용하여 비동기 작업을 수행 할 수 있습니다.
2. 템플릿의 ember-promise-helpers과 같은 것을 사용하십시오.
3. 약속 만 반환하면 안됩니다.

1을 할 수 없다면 3과 함께하는 것이 좋습니다.이 경우에는 PromiseProxyMixin을 이해해야합니다.ember-data에서이 믹스 인을위한 두 가지 구현, findAll, findRecord, query 또는 비동기 관계가 PromiseObject/PromiseArray을 반환 같은 PromiseArray 및 PromiseObject

모든 ember-data 방법이있다. 따라서 그들은 모두 promise및 일반 물체입니다. promise 부분은 model 후크에 유용하며 Object/부분은 계산 된 속성에 유용합니다. 당신을 위해 이동하는 가장 쉬운 방법은 그래서, 두 가지로 CP를 분할하는 것입니다 : 첫째 allWorkgroups는 하늘의 배열/해결되지 않은 약속되기 때문에

allWorkgroups: Ember.computed(function() { 
    return this.get('store').findAll('accounts2workgroup'); 
}), 
testA: Ember.computed('sessionAccount.account.id', 'allWorkgroups.@each.rights', 'allWorkgroups.@each.workgroup', function() { 
    return this.get('allWorkgroups') 
     .filter(a2w => a2w.get('rights') > 1) 
     .map(a2w => a2w.get('workgroup')) 
}).property('sessionAccount.account.id'), 

이것은, 작동하지만 다음 약속이 해결 될 때 배열이 업데이트됩니다 , testA CP가 재 계산됩니다.

당신은 또한 수동으로 새 PromiseArray 만들 수 있습니다 그러나 : 약속이 실패하면 당신이 알아야 할 그러나

testA: Ember.computed('sessionAccount.account.id', 'allWorkgroups.@each.rights', 'allWorkgroups.@each.workgroup', function() { 
    const promise = this.get('store').findAll('accounts2workgroup').then(a2ws => { 
     return workgroups 
      .filter(a2w => a2w.get('rights') > 1) 
      .map(a2w => a2w.get('workgroup')) 
    }); 

    return DS.PromiseArray.create({promise}); 
}).property('sessionAccount.account.id'), 

, 즉 두 경우 모두에서 어떤 정보를 얻을 수 없습니다!