javascript - Meteor Spacebars {{#if someCondition}} 在页面刷新时短暂显示数据

Question

我已经尝试了几种不同的方式，它们的行为方式相同(请参阅下面的代码)。我在 if 条件下使用空格键(并尝试使用帮助程序)来检查用户是否已登录，如果没有则显示登录/注册链接。如果是，请隐藏它们。

我注意到，在初始页面加载时(如果他们从不同的站点导航回来)，登录/注册链接在隐藏之前会快速显示(如果用户仍处于登录状态)。如果条件为假，有没有办法确保没有元素在 View 中呈现？在我看来，它应该在 View 开始呈现之前进行检查，然后在页面上显示适当的元素。

感谢您的帮助! -克里斯

解决我遇到的闪烁问题:我正在检查用户，尽管 View 呈现速度比数据库查询快。我添加了一个守卫表达式(见下文)，这似乎可以解决闪烁问题。

isUserLoggedOut: function() {
  var user = Meteor.user();

  if(Meteor.user()) {
    return user && false;
  } else{
    return user && true;
  }
}

尝试 #1:

Template.headerTpl.helpers({
  isUserLoggedIn: function() {
    var user = Meteor.user();

    if(user) {
      return false;
    } else{
      return true;
    }
  }
});

<template name="headerTpl">
  {{#if isUserLoggedIn}}
  <li style="display:none;"><a href="{{pathFor 'userRegistrationFormTpl'}}" id="signup-js">Sign Up</a></li>
  <li><a href="{{pathFor 'userLoginFormTpl'}}" id="login-js">Login</a></li>
  {{/if}}
</template>

尝试#2:

Template.headerTpl.helpers({
  isUserLoggedIn: function() {
    var user = Meteor.user();

    if(user) {
      return "hide";
    } else{
      return "show";
    }
  }
});

<template name="headerTpl">
  <li class={{isUserLoggedIn}}><a href="{{pathFor 'userRegistrationFormTpl'}}" id="signup-js">Sign Up</a></li>
  <li class={{isUserLoggedIn}}><a href="{{pathFor 'userLoginFormTpl'}}" id="login-js">Login</a></li>
</template>

尝试 #3:

{{#if currentUser}}
{{else}}
<li style="display:none;"><a href="{{pathFor 'userRegistrationFormTpl'}}" id="signup-js">Sign Up</a></li>
<li><a href="{{pathFor 'userLoginFormTpl'}}" id="login-js">Login</a></li>
{{/if}}

尝试 #4:

<template name="headerTpl">
  {{#if isUserLoggedOut}}
    {{> signInLinksTpl}}
  {{/if}}
</template>

<template name="signInLinksTpl">
  <li style="display:none;"><a href="{{pathFor 'userRegistrationFormTpl'}}" id="signup-js">Sign Up</a></li>
  <li><a href="{{pathFor 'userLoginFormTpl'}}" id="login-js">Login</a></li>
</template>

Template.headerTpl.helpers({
  isUserLoggedOut: function() {
    if(Meteor.user()) {
      return false;
    } else{
      return true;
    }
  }
});

Answer 1

您需要订阅 Meteor.users 集合，模板将在 Meteor.user() 创建后呈现，如果您不等待订阅页面将闪烁，因为开始时 Meteor.users 集合中没有任何内容。

您可以在具有登录字段的模板上使用新的 Meteor 功能

Template.login.onCreated(function () {
  var self = this;

  self.autorun(function () {
    self.subscribe("users");
  });
});

在 HTML 中

{{#if Template.subscriptionsReady}}
    <!--content-->
{{else}}
    Give me a second...
{{/if}}

当然你需要创建名为'users'的发布