모델 저장을위한 진행률 표시 줄을 만드는 방법

Question

원시 데이터 배열을 Ember 모델로 변환해야합니다. 배열에 forEach 루프를 구현하고 배열의 각 객체에 대한 모델을 작성하면됩니다.

문제는 내가 루프 할 수있는 수백 또는 수천 개의 모델을 잠재적으로 가질 수 있으며 10 초 이상 걸리는 것입니다. 사용자가 진행 표시 줄을 보여줄 수있는 방법이있는 한 오래 걸릴 수 있으므로 앱을 동결시키지 않고 얼마나 오래 기다려야하는지 알 수 있습니다.

App.ApplesController = Ember.Controller.extend({ 
    // array with possibly thousands of objects in it 
    applesJson: Ember.A(), 

    // we'll be dumping the newly created models in here 
    applesModels: Ember.A(), 

    buildAppleModels: function() { 
     var applesJson = this.get('applesJson'), 
      applesModels = Ember.A(); 

     applesJson.forEach(function (appleJson) { 
      var apple = self.store.createRecord('apple', appleJson); 
      applesModels.push(apple); 
      console.log('pushed an apple'); 
     }); 
    }, 

    ghettoProgressBar: function() { 
     var complete = this.get('applesModels.length'), 
      total = this.get('applesJson.length'); 

     return "Progress: " + complete + " out of " + total; 
    }.property('applesModels.@each') 
}); 

당신은 아마이 내 진짜 애플 리케이션되지 않습니다 말할 수있는, 그래서 등 진행률 표시 줄의 구현의 세부 사항 또는 만드는 모델

에 대해가 있다는 것입니다 문제를 걱정하지 마십시오 엠버 forLoop이 끝날 때까지 (프로세스가 시작된 후 10 초에서 20 초가 될 때까지) 모든 DOM 변경 사항을 지연하여 도움을 주려고합니다. 즉, 템플릿에 ghettoProgressBar를 삽입하면 희망대로 틱하지 않고 대신 유지합니다. 0에서 프로세스가 모두 완료되면 완료로 전환하십시오.

콘솔 로그에 유의하십시오. 예상대로 작동하며 모델이 생성 될 때마다 조금씩 눈을.니다. 나중에 Ember가 일괄 적으로 배치하기보다는 시간에 바로 작동하기 때문입니다.

아이디어가 있으십니까? 나는 이것을 꽤 오랫동안 수행하는 방법을 궁리 해 왔으며 어떤 도움을 주셔서 감사합니다. Ember가 큐를 일찍 플러시하도록 강제하는 몇 가지 방법이 있기를 희망하지만 API/가이드를 둘러 보지는 못했습니다.

Answer 1

올바르게 알아 차렸기 때문에 루프를 분해하고 Ember에게 DOM을 업데이트 할 기회를 주어야합니다.

사용자 인터페이스 라이브러리에서 반복해서 볼 수있는 패턴과 같습니다. 사용자 코드는 하나의 컨텍스트, 다른 UI는 다른 컨텍스트에서 실행됩니다. 때로는이 두 사람이 만나서 동기화해야합니다. 더 자주 이런 일이 일어나면 진행 속도가 느려집니다. UI가 느리게 느려지는 경우는 드뭅니다.

당신의 접근 방식은 "일할 수있는 모든 사이클, UI는 없습니다"입니다. 반대의 극단적 인은 다음과 같이 될 것이다 :

buildAppleModels: function() { 
    var applesJson = this.get('applesJson'), 
    applesModels = this.get('applesModels'), 
    index = 0; 

    return buildNext(); 

    function buildNext() { 
     var appleJson = applesJson[index]; 
     if (!appleJson) { 
      return; 
     } 
     var apple = Ember.Object.create(appleJson); 
     applesModels.addObject(apple); 
     console.log('pushed an apple'); 
     index++; 
     Ember.run.next(buildNext); 
    } 
} 

이 즉시 UI를 업데이트하지만, 열배 이상의 과정을 늦출.

올바른 접근 방식은 중간에 작업 일괄 작업을 수행 한 다음주기를 2 ~ 3 시간 동안 잠자기 상태로 유지하는 것입니다.

그렇다고 Ember가 DOM 업데이트를 동기식으로 흔들어 볼 수있는 몇 가지 방법이 있습니다 (해당 Ember.run docs을 파고들 수 있습니다).하지만 그렇게해도 매우 좋은 생각 일 것입니다. .