加载时加载微调器

Question

我想在我的帐户页面加载时加载一个微调器，这需要一些时间来加载＆＃34; myaccount＆＃34;页面所以我想使用微调器气氛包加载微调器。

这是我的代码，我需要在哪里添加{＆gt; spinner}加载微调器

this.route('myaccount', {path:'/myaccount/',
            fastRender: true
    });

对于myaccount，它需要联系第三方api以加载一些数据到页面。

建议我哪个是加载微调器的最佳位置

Answer 1

如果您使用NProgress预加载器，那么您可以像这样实现：

this.route('myaccount', {
    path:'/myaccount/',

    action:function(){
        self = this;
        self.render('header', {to:'header'});
        NProgress.start();
        // load external data and onComplete (callback) it renders template and stops preloader
        MyAccount.loadData(function(){
            self.render(self.template);
            NProgress.done();
        })
    }
  });

更新：

使用Spinner和Meteor订阅机制的标准解决方案是使用waitOn函数：

<template name="loadingTemplate">
  {{>spinner}}
</template>


<template name="layout">
    <nav>
      {{> yield region='header'}}
    </nav>
    {{> yield}}
    <footer>
      {{> yield region='footer'}}
    </footer>
</template>

Router.configure({
  loadingTemplate: 'loadingTemplate',
  layoutTemplate: 'layoutTemplate',
  yieldTemplates: { 
    'header': { to: 'header' },
    'footer': { to: 'footer' }
  }
});

// 
this.route('myaccount', {
    path: '/myaccount',
    template:'myaccountTemplate',
    layoutTemplate: 'layoutTemplate',
    data: function() { 
        ...
    },
    waitOn: function () {  
      return Meteor.subscribe('...');
    }
  });

Answer 2

Iron-router-progress很棒！

https://github.com/Multiply/iron-router-progress

使用此选项，它是顶部

  

Router.configure       progressDelay：100