将超时设置为layoutTemplate meteor / iron

时间:2015-12-02 00:52:58

标签: javascript meteor iron

我一直在努力为我的loadingTemplate设置3秒超时。

使用下面的代码loadTemplate会被渲染,但是在经过3秒后它会重定向到layoutTemplate,正如我所期望的那样。

请查看我的代码和评论问题。

我还将此版本部署到http://ns1-timeout.meteor.com/

我感谢任何帮助。

cgi.force_redirect=0

2 个答案:

答案 0 :(得分:0)

从setInterval返回将不会执行任何操作。您需要使用一个反应变量并准备好返回该反应变量的值:

Router.configure({
    layoutTemplate: 'applayout',
    loadingTemplate: 'loading',
    waitOn: function () {
        Session.set('isTimePassed', false);
        var isTimePassed = false;
        var clock = 3;

        var timeLeft = function() {
            if (clock > 0) {
                clock--;
                Session.set("time", clock);
                console.log(clock);

            } else {
                console.log("That's All Folks");
                //return true
                isTimePassed = true;
                Meteor.clearInterval(interval);
                console.log('is Time passed: '+ isTimePassed);
                Session.set('isTimePassed', true);

            }
        };

        var interval = Meteor.setInterval(timeLeft, 1000);

        return {
            ready: function () {
                return Session.get('isTimePassed');
            }

        }

    }
});

但是,您的问题中并不完全清楚这是否是您打算做的事情。

答案 1 :(得分:0)

经过几个小时的研究,我发现为加载模板设置自定义超时的最佳方法是不使用Router.configure。正确的方法是将onBeforeAction函数调用到我的/ route。所以代码结束如下:

Router.configure({
layoutTemplate: 'appLayout',
loadingTemplate: 'loading'
});

Router.onBeforeAction(function(){
   if(!Session.get('templateLoaded'))
   {
    setTimeOut(1000);
    this.layout('loading');
    this.render('loading');
   }
  else
  {
    this.render('home');
    this.next();
  }
}, 
{
   only: ['home']

});

var setTimeOut = function (timeout) {
var self = this;
self._ready = false
self._dep = new Tracker.Dependency();

Meteor.setTimeout(function () {
    self._ready = true;
    self._dep.changed();
    if(Meteor.isClient){
        Session.set('templateLoaded', true); // set session variable to true so applayout Template will be rendered
    }

}, timeout);

  return function () {
    self._dep.depend();
    return function () {
        return self._ready;
   }
 }
};