Ember.js로 템플릿로드 지연

Question

Ember.js 및 Handlebars.js를 사용하는 응용 프로그램에서 작업하고 있습니다. 페이지가 처음로드 될 때 템플릿을 표시하는 데 약간의 지연이있을 수 있음을 발견했습니다. 자바 스크립트가 HTML을 만들어야하기 때문에 이런 일이 일어나는 것은 당연합니다. 빈 페이지가로드 된 것처럼 페이지가 처음로드 될 때 갑자기 모든 것이 나타납니다.

정직하게 말하면, 이것은 내가 살아갈 수있는 문제이지만 여전히 나에게는 조금 어색한 것처럼 보입니다. 나는 과잉 분석일지도 모르지만, 누군가는 이것을 알아 차리고 페이지 로딩을 "자연스럽게"보이게하는 방법에 대한 권장 사항을 가지고 있습니까?

App.ShowSpinnerWhileRendering = Ember.Mixin.create({ 
    layout: Ember.Handlebars.compile('<div class="loading">{{ yield }}</div>'), 

    classNameBindings: ['isLoaded'], 

    didInsertElement: function() { 
    this.set('isLoaded', true); 
    this._super(); 
    } 
}); 

에서 :

Answer 1

제가 위에서 주석으로 페이지가 예를 들어, 등 데이터로드를 렌더링하는 동안, 당신은 스피너를 표시 할 수 있습니다, 아래의보기가 렌더링 될 때까지 스피너를 보여주는 믹스 인이다

App.ShowSpinnerWhileRendering = Ember.Mixin.create({ 
    layout: Ember.Handlebars.compile('<div class="loading">{{ yield }}</div>'), 

    classNameBindings: ['isLoaded'], 

    isLoaded: function() { 
    return this.get('isInserted') && this.get('controller.isLoaded'); 
    }.property('isInserted', 'controller.isLoaded'), 

    didInsertElement: function() { 
    this.set('inserted', true); 
    this._super(); 
    } 
}); 

그리고 당신의 견해로 혼합 :

App.ApplicationView = Ember.View.extend(App.ShowSpinnerWhileRendering, { 
// ... 
}); 

당신이 부하에 데이터를 대기하는 경우는 (당신이보기를 표시하기위한 라우터를 사용하는 가정)

는 그런 다음 showSpinner 클래스를 갖는 요소에 로딩 스피너 (또는 무언가)를 보여 일부 CSS 규칙을 정의하고, 또한 isLoaded 클래스가있을 때 그것을 숨기기 :

.loading{ 
    background-image: url("spinner.png") 
    background-color: #DFDFDF 
} 

.is-loaded .loading { 
    /* back to default styling, e.g. */ 
    background-image: none 
    background-color: white 
}