DOM 초기화 후 데이터가로드되는 동안 로더 표시

유성 앱이 서버에 배포되면 mongodb에서 데이터를 가져 오는 데 상당한 시간 (3-4 초)이 소요됩니다. 내 애플 리케이션에서, # 각 블록 도우미를 통해 데이터에 바인딩 된 템플릿이 있습니다. 응용 프로그램로드가 새 브라우저 세션에서 사용자가 볼 때DOM 초기화 후 데이터가로드되는 동안 로더 표시

{{#each items}} 
    {{> item_info}} 
{{else}} 
    No items yet. 
{{/each}}

그래서 시간 데이터까지 메시지 No items yet로드를 완료했습니다. 데이터를 사용할 수있게되면 해당 메시지가 실제 데이터로 바뀝니다. 그러나 일부 사용자는 실제로 3-4 초 동안 데이터를 잃어버린 것으로 생각하기 때문에 사용자 경험이 좋지 않습니다.

제 질문은 - 데이터를 가져 오는 동안 "로드 중 ..."과 같은 "else"메시지를 변경할 수 있습니까? 아니면이 문제에 대한보다 우아한 해결책이 있습니까?

감사합니다.

출처

2012-12-06 iamgame

내가 가장 유성 개발자는이 건너왔다 확신 발행물. – iamgame

* [유성 컬렉션이로드되는 동안 로더 표시]의 정확한 * 복제본 (http://stackoverflow.com/questions/12879762/displaying-loader-while-mete-collection-loads) –

난 당신이이 즉 UR 컬렉션은 클라이언트에서로드가 완료되어, 가입이 완료 될 때 자동으로 실행됩니다 Meteor.subscribe()

내부 onComplete() 기능 Session를 사용한다고 생각합니다.

예 :

Meteor.subscribe('yourCollection', function onComplete(){ 

     // set a session to true indicating your collection is loaded. 
     Session.set('itemsLoaded', true); 
});

은 다음과 같은 세션 값을 기반으로 템플릿 도우미를 호출

Template.yourTemplate.isLoaded = function(){ 

    return Session.get('itemsLoaded'); 
}

그리고 당신의 HTML은 다음과 같이 표시됩니다

<template name="yourTemplate"> 
    {{#if isLoaded}} 
     {{#each items}} 
      {{> item_info}} 
     {{/each}} 
    {{/if}} 

    {{#unless items}} 
     <img src="images/loader.gif"> 
    {{/unless}} 
</template>

출처

2012-12-06 09:14:55

{{# #}은 동일하지 않습니다. "그렇지 않다"고 말하는가? 이 경우 {{#unless}} 내부에 마크 업을 넣는 것은 {{#if}}의 {{else}} 블록 안에 넣는 것과 같습니다. – iamgame

또한 확실하게, 나는 당신의 제안을 시도했지만 그게 문제를 해결하지 못했습니다. 로더 이미지는 "아직 항목이 없습니다"라는 메시지와 같은 목적으로 사용되었습니다. 따라서 데이터가 로딩되는 동안 로더가 잘 보이지만 목록 안에 진정으로 항목이없는 경우에는 나 빠진다. – iamgame

subscribe 메서드 종류의 onComplete 콜백으로 내 문제가 해결되었습니다. 감사. – iamgame

DOM 초기화 후 데이터가로드되는 동안 로더 표시

답변

관련 문제