如何摆脱 Meteor 模板闪烁答案

【问题标题】：How to get rid of Meteor template flickers如何摆脱 Meteor 模板闪烁
【发布时间】：2015-04-03 01:08:24
【问题描述】：

我有一个包含多个条件的 Meteor 模板，当它最初加载时，我得到一些条件视图的闪烁。

我正在使用 Iron 路由器，我知道订阅、wait() 和 ready() 选项，但是问题之一是主要条件 isInstalled 依赖于 meteor.call 回调来设置isInstalled 变量，因此等待不依赖于订阅。那么我该如何解释这个用例呢？

<template name="adminLayout">
    {{#if isInstalled}}
        {{#if currentUser}}
            {{> adminHeader}}
            <br /><br />
            <div class="row">  
              <div class="medium-3 columns">
              {{> adminNav}}
              </div>
              <div class="medium-9 columns">
                {{> yield}}
              </div>
            </div>
            <div class="row">
              <div class="medium-12 columns">
              {{> adminFooter}}
              </div>
            </div>
        {{else}}
            {{> login}}
        {{/if}}
    {{else}}
        {{> install}} 
    {{/if}}
</template>

这是我的模板助手，说明了我如何为isInstalled 提供值

Meteor.call('isInstalled', function (err, result) {
  if (err) {
    console.log(err);
  }
  Session.set('isInstalled', result);
});

Template.adminLayout.helpers({
  isInstalled: function () {
    return Session.get('isInstalled');
  }
});

最后是路线：

Router.route('/admin', function () {
  this.layout('adminLayout');
  this.render('dashboard');
});

【问题讨论】：

一个简单的解决方法是隐藏 div，然后在脚本运行时显示它。

标签： javascript meteor iron-router

【解决方案1】：

onBeforeAction 钩子怎么样？当然，您必须为 /login 和 /install 提供其他路线，但我认为这会是更好的方法，因为用户应该能够通过 url 导航，例如：

Router.onBeforeAction(function() {
    if (!Meteor.userId()) {
        Router.go('/login');
        this.next();
    } else {
        if (/*check somehow if installed*/) {
            this.next();
        }else{
          Router.go('/install');
          this.next();
        }
    }
});

【讨论】：

【解决方案2】：

事实证明，闪烁问题实际上是 Meteor 问题，而不是 Iron Router 问题，尽管 Iron Router 可以使用其 wait() 和 ready() 方法提供解决问题的解决方法。

在我的特殊情况下，我不需要等待订阅，而是等待 Meteor.call 结果。为了实现这一点，我创建了一个匿名函数，它返回一个带有 Iron Router 可以理解的就绪方法的对象句柄，然后我可以在路由逻辑中实现。

Sindis 引导我朝着正确的方向前进，尽管这是一个不完整的解决方案。以下是我的实现方式：

Router.onBeforeAction(function (params) {
    var self = this;
    if (params.url.match(/admin/)) {
        this.wait(function(){
            Meteor.call('isInstalled', function (err, result) {
                Session.set('installationCheck', true);
                Session.set('isInstalled', result);
            });
            return {
                ready: function () {
                    return Session.get('installationCheck');
                    self.next();
                }
            }   
        });
        if (this.ready()) {
            if (Session.get('isInstalled')) {
                this.next();
            } else if(Session.get('isInstalled') === false) {
                console.log('go to install!');
                this.render('install');
            }
        }
    } else {
        this.next();
    }
});

这是一个更通用的模式，它允许您根据异步条件设置路由

Router.onBeforeAction(function (params) {
    var self = this;
    this.wait(function(){
        Meteor.call('someMethod', function (err, result) {
            Session.set('someMethodCalled', true);
            // do whatever with result...
            Session.set('someCondition', true); 
        });
        return {
            ready: function () {
                return Session.get('someMethodCalled');
                self.next();
            }
        }   
    });
    if (this.ready()) {
        if (Session.get('someCondition')) {
            this.next();
        } else if(Session.get('someCondition') === false) { // important to be explicit ===
            this.render('someSpecificRoute');
        }
    }
});

【讨论】：