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

Question

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

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

感谢您的帮助！ -克里斯

我遇到的闪烁的解决方案： 我正在检查用户，尽管视图呈现速度比数据库查询快。我添加了一个保护表达式（见下文），这似乎可以解决闪烁问题。

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

您可以改用帐户包中的 currentUser 助手，就像这样。

{{#if currentUser}}
<!-- show content -->
{{else}}
 {{> login }} <!-- render login template -->
{{/if}}

Iron 路由器选项。

路由器层面也有解决方案，使用Router.onBeforeAction。

// lib/routes.js
// Create the function to check login.
   var requireLogin = function() {
       if (! Meteor.user()) {
          this.render('login');
        } else {
          this.next(); //using this.next the iron router will render the route named on the onBefore
      }
   }

   Router.onBeforeAction(requireLogin, {only: 'theRoute});

更新

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

<template name="headerTpl">
  {{#if isLogged}}
       <h1>Welcome User</h1>
     {{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}}
</template>

Answer 2

您确定您的想法正确吗？

isUserLoggedIn: function() { // implies you're checking for the user
    var user = Meteor.user(); // if there's a user this returns true

    if(user) { // you're saying if there's a user ...
        return false; // return false
    } else{ // and if there isn't
    return true; // return true
    }
}

基本上你说的是 "is the user logged in" 如果是的话 "return false" 这让你三思而后行。相反，反转你的逻辑。

isUserLoggedOut: function() { // implies you're checking for the user
    var user = Meteor.user(); // if there's a user this returns true

    if(user) { // there is a user
        return false; // so isUserLoggedOut == false
    } else{ // and if there isn't a user
        return true; // isUserLoggedOut == true
    }
}

现在您的模板变得简单

{{#if isUserLoggedOut}}
   {{>loggedOutTemplate}}
{{/if}}

Answer 3

您需要订阅 Meteor.users collection，模板将在 Meteor.user() 创建后呈现，如果您不等待订阅页面会闪烁，因为在开始时Meteor.users collection.

中没有任何内容

您可以在具有登录字段的模板上使用新的 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'

的发布

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

Meteor Spacebars {{#if someCondition}} shows data briefly on page refresh

javascript

meteor

spacebars