Meteor 在DOM初始化后加载数据时显示加载程序

Meteor 在DOM初始化后加载数据时显示加载程序,meteor,Meteor,当meteor应用程序部署在服务器上时,从mongodb获取数据需要相当长的时间(3-4秒)。在我的应用程序中,我有一个通过#each block helper绑定到数据的模板 {{#each items}} {{> item_info}} {{else}} No items yet. {{/each}} 因此,当应用程序加载到新的浏览器会话中时,在数据加载完成之前,用户会看到消息还没有项目。当数据可用时,该消息将替换为实际数据。但这会导致糟糕的用户体验,因为一些用户实际

当meteor应用程序部署在服务器上时,从mongodb获取数据需要相当长的时间(3-4秒)。在我的应用程序中,我有一个通过#each block helper绑定到数据的模板

{{#each items}}
    {{> item_info}}
{{else}}
    No items yet.
{{/each}}
因此,当应用程序加载到新的浏览器会话中时,在数据加载完成之前,用户会看到消息
还没有项目。当数据可用时,该消息将替换为实际数据。但这会导致糟糕的用户体验,因为一些用户实际上认为,在这3-4秒钟内,他们丢失了数据

我的问题是——在提取数据时,是否可以将“else”消息更改为“Loading…”之类的消息?还是有更优雅的解决方案


谢谢。

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

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

例如

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>

{{#如果已加载}
{{{#每项}
{{>项目信息}
{{/每个}}
{{/if}
{{{#除非项目}
{{/除非}

我相信大多数meteor开发人员都遇到过这个问题。的确切副本{{{self}}与“if not”不一样吗?在这种情况下,将标记放在{{{除非}}中与将其放在{{如果}的{else}块中是一样的。当然,我尝试了你的建议,但这并没有解决问题。加载程序映像的作用与“no items yet”消息的作用相同。因此,加载程序在加载数据时看起来很好,但在列表中确实没有项目时看起来很糟糕。subscribe方法的onComplete回调解决了我的问题。谢谢