2015-01-08 2 views
0

<select> 태그에 일부 기능을 추가하는 구성 요소가 있습니다. <select>이 완전히 렌더링 된 후 일부태그를 포함하여 일부 자바 스크립트를 초기화하려고합니다. <option> 태그를 채우는 데 사용되는 데이터는 ajax 요청에서 제공된 객체의 배열입니다.Ember 약속이 해결되기 전에 구성 요소 렌더링 선택

나는 ember-data를 사용 중이며 데이터가 상점에서 제공 될 때이 점이 발견됩니다. 즉 유용한 정보가 isLoaded 인 DS.RecordArray의 인스턴스입니다. 그러나 데이터가 jQuery ajax 호출에서 제공되고 일반 JSON 일 경우 jQuery에 의해 반환 된 약속이 충족되기 전에 구성 요소가 모든 것을 렌더링하려고하는 것처럼 보입니다.

문제가 해결되기 전에 문제를 해결할 때 문제가 있다고 생각합니다 (예 : 약속이 올바르게 해결 되었음). RSVP.Promise 객체에서 ajax 호출을 래핑하려고 시도했지만 행운은 아닙니다 (Ember-CLI를 사용하고 있습니다). 아래는 내가 지금까지 가지고있는 단순화 된 버전입니다. 어떤 도움을 주시면 감사하겠습니다.

// My route 
export default Ember.Route.extend({ 
    setupController: function(controller, model) { 
     this._super(controller, model); 

     var hash = Ember.RSVP.hash({ 
       // myOptions: $.getJSON('/api/options') 
       myOptions: new Ember.RSVP.Promise(function(resolve, reject) { 
        Ember.$.ajax({ 
         url: '/api/options', 
         type: 'get', 
         dataType: 'json', 
         success: function(result) { 
          Ember.run(null, resolve, result); 
         }, 
         error: function(result) { 
          Ember.run(null, reject, result); 
         } 
        }); 
       }) 
      }); 

     return hash.then(function(result) { 
      controller.set('optionsForSelect', result.myOptions); 
     }); 
    } 
}); 

// My component 
export default Ember.Select.extend({ 
    didInsertElement: function() { 
     // Is called before ajax request has finished 
     this.$().mySelectPlugin({ 
     }); 
    } 
}); 

// Handlebars template 
{{my-select-plugin content=optionsForSelect optionValuPath="content.id" optionLabelPath="content.name"}} 
+1

'setupController'로부터 약속을 되 돌리는 것은 아무런 도움이되지 않습니다. 'model' (또는'beforeModel' 또는'afterModel')에서 약속을 반환 해보십시오. –

+0

네, 맞아. 토라자부로. 당신의 도움을 주셔서 감사합니다. – antony

답변

2

제게 이것은 컨트롤러가 아닌 경로에서 처리해야합니다. 비슷한 상황에서 내가 한 일은 다음과 같습니다.

App.LessonsShowIndexController = Ember.ObjectController.extend({ 
    author: function() { 
     return this.get('model').get('author'); 
    }.property('author'), 
    fullName: function() { 
     return this.get('author').get('firstName') + ' ' + this.get('author').get('lastName'); 
    }.property('author.isFulfilled'), 
}); 

isFulfilled 속성을 사용하면 컨트롤러가 데이터를 사용하기 전에 약속을 기다릴 수 있습니다. 귀하의 경우 약속을 되돌려주는 재산과 성취 될 때까지 기다리는 재산을 가질 수 있습니다.

+0

니스! 이 접근법은 구성 요소에서도 작동합니다. –

관련 문제