긴 작업을 수행하기 전에 템플리트를 강제로 동기화하십시오.

Question

몇 시간이 걸리는 작업이 있으며 로딩 스피너를 표시하여 사용자에게 표시하지 않아도됩니다. 나는 로딩 스피너가 표시되기 전에 가끔 이상 실행 행위에 직접 트리거 것을 깨달았다 알고 : 내가 50ms의로의 전환을 지연하여이를 달성하기 위해 노력

 this.set('betRound.isLoading', true); 
     var _this = this; 
     Ember.run.sync(); 
     Ember.run.later(function(){ 
      _this.transitionToRoute('betround.edit', _this.get('betRound.content')); 
     }, 50); 

있지만, 일부 느린 모바일 기기, 따라 로딩 스피너에 "isLoading"은 표시되지 않습니다.

Answer 1

콜백 메커니즘의 일종으로, 로딩 스피너를 뷰 또는 구성 요소에 넣고 DOM 준비가되면 컨트롤러에 알립니다. 다음은 믹싱의 예입니다. 모든 뷰 또는 구성 요소에 첨부하여로드 한 후 알림을 보낼 수 있습니다.

App.LoadAware = Ember.Mixin.create({ 
    didInsertElement: function() { 
    this._super(); 
    var target = this.get("loadedNoticeTarget"); 
    Ember.assert("We must have loadedNoticeTarget in LoadAware component or view", target); 
    target.send("loadAwareLoaded"); 
    } 
}); 

당신은 다음과 같이 적용합니다 :

App.LoadingSpinnerComponent = Ember.Component.extend(App.LoadAware); 

을 템플릿에서 : 다음

{{#if isLoading}} 
    {{loading-spinner loadedNoticeTarget=this}} 
{{/if}} 

와, 컨트롤러에서 :

App.IndexController = Ember.Controller.extend({ 
    actions: { 
    goToSlowRoute: function() { 
     this.set("_waitingForSpinner", true); 
     this.set("isLoading", true); 
    }, 
    loadAwareLoaded: function() { 
     Ember.assert("We must be waiting on spinner at this point", this.get("_waitingForSpinner")); 
     this.set("_waitingForSpinner", false); 
     this.transitionToRoute("slowRoute"); 
    } 
    }, 
    isLoading: false 
}); 

을이 예에서 , sendi로 전환을 시작합니다. 컨트롤러에 goToSlowRoute 메시지를 보냅니다. 전체 JSBin here.