在DOM初始化後加載數據時顯示加載器

當在服務器上部署流星應用程序時，需要花費大量的時間（3-4秒）才能從mongodb中獲取數據。在我的應用程序中，我有一個通過#each塊助手綁定到數據的模板。在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-meteor-collection-loads） –

我想你應該onComplete()功能使用Session的Meteor.subscribe()

內這會在執行時自動認購完成後，即UR集合完成客戶端加載。

例如，

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

是不是{{#unnis}}相同如果說「如果不是」？在這種情況下，將{{#unique}}中的標記放在{{#if}}的{{else}}塊中。 – iamgame

也只是可以肯定的，我試過了你的建議，但那並沒有解決問題。加載器映像與「沒有項目」消息完成的目的相同。因此，加載數據時加載器看起來很好，但在列表中沒有真正的項目時看起來很糟糕。 – iamgame

訂閱方法的onComplete回調類型解決了我的問題。謝謝。 – iamgame

在DOM初始化後加載數據時顯示加載器

回答

相關問題