2015-03-19 2 views
1

Я пробовал это несколько разных способов, и они оба ведут себя одинаково (см. Ниже код). Я использую spacebars, если условие (и попытался использовать хелпер), чтобы проверить, вошел ли пользователь в систему, а затем отображать логин/регистрационные ссылки, если они не являются. Если они есть, спрячьте их.Meteor Spacebars {{#if someCondition}} показывает данные кратко на странице обновления

Что я заметил, так это то, что при загрузке начальной страницы (если они перемещаются назад с другого сайта), ссылки входа/регистрации отображаются быстро, прежде чем скрываться (если пользователь все еще вошел в систему). Есть ли способ гарантировать, что никакие элементы не будут отображаться в представлении, если условие ложно? Мне кажется, что он должен проверить, прежде чем представление начнет рендеринг, а затем отобразит соответствующие элементы на странице.

Спасибо за помощь! -Крис

Решение мерцания, что я испытывал: я проверяла против пользователя, хотя вид был рендеринг быстрее, чем запрос DB. Я добавил выражение охраны (см. Ниже) и, похоже, позаботится о мерцании.

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

ответ

3

Вы должны подписаться на коллекцию Meteor.users, шаблон будет оказана после Meteor.user() создается, если вы не будете ждать подписки страница будет мигать, потому что при запуске в коллекции Meteor.users ничего не происходит.

Вы можете использовать новые функциональные возможности Метеор на шаблоне, где вы логин поле

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

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

И в HTML

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

Конечно, вы должны создать опубликовывает с именем «пользователей»

+0

все было так. Я попробовал несколько из вышеупомянутых решений, хотя не смог заставить их работать так, как я этого хотел. сделал трюк, не говоря уже об использовании новых технологий Meteor! – Centinel3

2

Вместо этого вы можете использовать помощник из своего аккаунта.

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

Железный маршрутизатор.

Существует также решение на уровне маршрутизатора с использованием 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}); 

UPDATE

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> 
+1

Ethaan получил это передо мной. Логика здесь заключается в том, что есть пользователь, покажите им пользовательский контент, если не попросите их войти в систему. – thatgibbyguy

+0

Спасибо @Ethaan, но ваше решение - это моя попытка № 3 (см. Выше), которая имеет такое же поведение. ссылки показывают быстро, прежде чем они будут скрыты, как только приложение поймет, что пользователь вошел в систему. – Centinel3

+0

@ Centinel3 вы попробовали onBefore? – Ethaan

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 
    } 
} 

В основном вы говорите «является пользователь, вошедший в» и если да, то «вернуться ложным», который делает вас двоемыслия. Вместо этого измените свою логику.

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}} 
+0

Спасибо @thatgibbyguy. Уверен, что я обязательно это реализую, хотя и не меняет того факта, что ссылки все еще появляются ненадолго, – Centinel3

+0

Хорошо, что эта вспышка связана с тем, что ваша БД еще не была запрошена. Чтобы исправить флеш, вы можете попробовать использовать защитный https://dweldon.silvrback.com/guards или можете попробовать авторизоваться, как указано ниже. также предлагает вариант «waiton», который я обычно использую, чтобы избежать вспышки. – thatgibbyguy

Смежные вопросы