如何摆脱流星模板闪烁 [英] How to get rid of Meteor template flickers

问题描述

我有一个带有多个条件的Meteor模板，并且在初始加载时会出现一些条件视图的闪烁.

I have a Meteor template with multiple conditions, and I get a flicker of some of the conditional views when it loads initially.

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

I'm using iron router and I'm aware of the subscriptions, wait() and ready() options, however one of the problems is that the main conditional isInstalled depends on a meteor.call callback to set the isInstalled variable, so the wait doesn't depend on a subscription. So how do I account for this use case?

<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

Here's my Template helper, illustrating how I'm providing the value for 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');
});

推荐答案

事实证明，闪烁的问题确实是一个流星问题，而不是Iron Router，尽管Iron Router可以提供一种解决方法来使用其等待来解决问题. ()和ready()方法.

As it turns out the flickering issue is really a Meteor issue, not an Iron Router one, though iron router can provide a workaround to solve the problem using its wait() and ready() methods.

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

In my particular case I didn't require a wait on a subscription but on a Meteor.call result. In order to achieve this I created an anonymous function that return an object handle with a ready method that Iron Router could understand and I could later implement in the route logic.

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

Sindis guided me in the right direction though it was an incomplete solution. Below is how I accomplished it:

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();
    }
});

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

And here is a more general pattern which allows you to set routes based on asynchronous conditions

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');
        }
    }
});

这篇关于如何摆脱流星模板闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！