2016-12-07 1 views
0

J'ai besoin d'aide. Mon code est dans un login. Lorsque l'utilisateur clique sur login: Je mets un bouton de désactivation pour éviter que l'utilisateur clique plusieurs fois lorsque le système fonctionne, en attente d'une réponseMeteor.setTimeout() à l'intérieur de Meteor.loginWithPassword()

Mon code fonctionne bien, mais je mets une classe loader quand l'utilisateur cliquez sur le bouton login.

Lorsque l'utilisateur met le mot de passe et est accepté, le système nous envoie à la vue suivante. Cela fonctionne bien, mais ... Le problème est: Lorsque l'utilisateur a mis un mot de passe invalide this.loadingActive = true; ne change pas .. le bouton reste avec le spin actif pour toujours. Je veux dire quelque chose happend que la loadingActive variables DonT changement true

mon html

<button class="btn btn-default btn-lg btn-block" 
     ng-class="{'disabled': login.loadingActive === false}" 
     ng-disabled="loginForm.$invalid || login.loadingActive === false" 
     ng-click="login.login()"> 
    <span ng-hide="login.loadingActive" class="fa fa-refresh animacion-cargando"></span> 
    <span ng-hide="login.loadingActive">loading...</span> 
    <span ng-show="login.loadingActive">Login</span> 
</button> 

Ceci est mon js fichier

login() { 
    this.loadingActive = false; 
    this.error = ''; 
    Meteor.loginWithPassword(this.credentials.email.toLowerCase(), this.credentials.password, 
     this.$bindToContext((err) => { 
      Meteor.setTimeout(() => { 
       if (err) { 
        this.loadingActive = true; 
        this.error = err; 
       } else { 
        this.loadingActive = true; 
        this.$state.go('app.pageOne'); 
       } 
      }, 1000); 
     }) 
    ); 
} 

Pourquoi quand je mets un Meteor.setTimeout intérieur un Meteor.loginWithPassword arrive-t-il? des idées?

merci!

+0

Ce n'est pas un bon modèle pour la limitation des taux. Regardez [DDPRateLimiter] (https://docs.meteor.com/api/methods.html#ddpratelimiter). En outre, je pense que le problème est que 'this' dans le' setTimeout' n'est pas le même 'this' que dans la portée externe. –

Répondre

0

Je vois que vous enveloppez le rappel dans un this.$bindToContext. Je ne sais pas ce qu'il fait, mais je suppose qu'il modifie le contexte (this) la fonction de rappel de sorte que this.loadingActive = true n'a aucun effet.

Pour résoudre ce problème, vous pouvez utiliser une variable de référence:

login() { 
    const self = this; 
    // ... 
    Meteor.loginWithPassword(
    self.credentials.email.toLowerCase(), 
    self.credentials.password, 
    self.$bindToContext((err) => { 
     Meteor.setTimeout(() => { 
     // ... 
     self.loadingActive = true; 
     }, 1000); 
    } 
)); 
}