meteor - 在 DOM 初始化后加载数据时显示加载器

Question

当在服务器上部署一个 meteor 应用程序时，从 mongodb 获取数据需要花费大量时间(3-4 秒)。在我的应用程序中，我有一个通过 #each block 助手绑定(bind)到数据的模板。

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

因此，当应用程序在新的浏览器 session 中加载时，用户会看到消息 No items yet，直到数据加载完成。当数据可用时，该消息将被替换为实际数据。但这会导致糟糕的用户体验，因为有些用户实际上认为，在那 3-4 秒内，他们已经丢失了数据。

我的问题是——是否可以在获取数据时将“else”消息更改为“正在加载...”之类的消息？或者对于这个问题有更优雅的解决方案吗？

谢谢。

Answer 1

我认为你应该在 Meteor.subscribe() 中使用 Session 和 onComplete() 函数

这将在订阅完成时自动执行，即您的收藏已完成加载到客户端。

例如。

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

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

然后根据 session 值调用您的模板助手:

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>