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

Question

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

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

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

我的问题是 - 在获取数据时是否可以将"其他"消息更改为"正在加载..."？或者是否有更优雅的解决方案来解决这个问题？

谢谢.

Answer 1

我认为你应该使用Session与onComplete()内部功能Meteor.subscribe()

这将在订阅完成时自动执行,即在客户端上加载完成的集合.

对于Eg.

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>