在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初始化后加载数据时显示加载器

回答

相关问题