Meteor.js - jQuery - сообщение об ошибке входа в систему fadeOut

Question

Я хочу, чтобы сообщение об ошибке fadeOut появилось при попытке входа пользователя в систему. Думал, что это сработает, но это не так. Есть идеи ?

Проблема: Сообщение, которое появляется после неудачной попытки входа в систему не получает FADEOUT()

Template.signin.events({ 
     "submit #signin-form": function(event, template) { 
     event.preventDefault(); 
     Meteor.loginWithPassword(
      template.find("#signin-username").value, 
      template.find("#signin-password").value, 
      function(error) { 
       if (error) { 
       Session.set('errorMessage', error.message); 
       $('#err').delay(1000).fadeOut('slow'); // #err is id of error message div 
       }else{ 
       Session.set('errorMessage', undefined); 
       Router.go('/'); 
       } 
      } 
     ); 
     } 
    }); 

Шаблон:

<template name="signin"> 
    <div id="signin-div"> 
    <center><img id="logo-lg" src="logo.jpg"/></center> 
     <div class="container"> 
     <form id="signin-form" class="form-signin" role="form"> 
      <div class="signinerr"> 
      {{#if errorMessage}} 
       <div id="err" class="alert alert-danger " role="alert">Login failed!</div> 
      {{/if}} 
      </div> 
      <h2 class="form-signin-heading">Log in to Hive</h2> 
      <input id="signin-username" type="text" class="form-control" placeholder="Username" required autofocus> 
      <input id="signin-password" type="password" class="form-control" placeholder="Password" required> 
     <!-- <label class="checkbox"> 
      <input type="checkbox" value="remember-me"> Remember me 
     </label> 
     --> 
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
     </form> 

     </div> 
    </div> 
{{>footer}} 
</template> 

РЕШЕНИЕ: Я думал, что я его. Для этого я использовал Saimeunt.

Это покажет ваше сообщение

Tracker.afterFlush(function() { 
     $('#err').stop(clearQueue=true).fadeIn('fast').delay(3000).fadeOut('slow'); 

    }); 

... и предотвратить очереди анимации создать.

Answer 1

Вы должны понять, как работает реактивный механизм шаблонов для решения этой проблемы.

Когда вы устанавливаете переменную Session в состояние, в котором она инициирует вставку вашего сообщения об ошибке div в DOM, то, что вы действительно делаете, это просто установка флага, поток вашего кода не волшебным образом перескакивает на внутренний функции, которые будут отвечать за фактическое создание div и вставка его в DOM.

Это в основном, почему следующая строка вашего кода, исчезающая из div с использованием jquery, будет терпеть неудачу: div еще не находится в DOM в конце концов!

Установка переменной Session фактически аннулирует внутреннее Template вычисление, которое будет вставлять ваше сообщение об ошибке в какой-то момент позже.

Так что вы хотите сделать после установки переменной Session не сразу манипулируя еще быть вставлен DIV, вы хотите сказать Tracker системы (внутренняя система Метеора для отслеживания реактивных изменений), чтобы завершить свои собственные Недействительные вычислений повторов сначала, а затем играть только с недавно вставленным div, используя jQuery.

Это, как вы это делаете:

Session.set("errorMessage",error.message); 
Tracker.afterFlush(function(){ 
    $('#err').delay(1000).fadeOut('slow'); 
}); 

Подробнее о Tracker.afterFlush в документации: http://docs.meteor.com/#tracker_afterflush

Answer 2

Альтернативное решение, где мы позволяем Метеор сделать это работа управления HTML, используя http://daneden.github.io/animate.css/

{{#if errorMessage}} 
    <div class="alert alert-danger animated fadeOut" role="alert">Login failed!</div> 
{{/if}} 

И

Session.set('errorMessage', error.message); 
Meteor.setTimeout(function(){ 
    Session.set('errorMessage',null); 
},2000);