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