Routeur empêchant les transitions via willTransition

Il déclenche l' action willTransition sur les routes actuellement actives lorsque vous réessayez la transition à l'aide de l' assistant {{link-to}} ou de la méthode transitionTo .

Syntaxe

Ember.Route.extend ({
   actions: {
      willTransition(transition) {
         //handle the transition
      }
   }
});

Exemple

L'exemple ci-dessous illustre la prévention des transitions via le willTransitionaction sur la route active. Créez une route appelée willtransition et ouvrez le fichier router.js avec le code suivant pour définir les mappages d'URL -

import Ember from 'ember';                   
//Access to Ember.js library as variable Ember
import config from './config/environment';
//It provides access to app's configuration data as variable config 

//The const declares read only variable
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

Router.map(function() {
   this.route('willtransition');
});

//It specifies Router variable available to other parts of the app
export default Router;

Créez le fichier application.hbs et ajoutez le code suivant -

//link-to is a handlebar helper used for creating links
{{link-to 'Click For Transition' 'willtransition'}}
{{outlet}} //It is a general helper, where content from other pages 
   will appear inside this section

Ouvrez le fichier fichier willtransition.js créé sous app / routes / avec le code suivant -

import Ember from 'ember';

export default Ember.Route.extend ({
   actions: {
      willTransition(transition) {
         
         //decalring the self variable
         var self = this;
         
         //checking whether self variable is false or not
         if (!this.get('allowTransition')) {
            document.write('<b><font color = "red">');
            
            //display the message
            document.write("transition abort");
            document.write('</font><br>');
            transition.abort();  //calling abort function

            Ember.run.later(function () {
               //setting the self variable to true
               self.set('allowTransition', true);
               document.write('<b><font color = "blue">');
               
               //display the message
               document.write("transition retry");
               document.write('</font>');
               transition.retry();  //calling retry function
            }, 500);
         }
      }
   }
});

Ouvrez le fichier willtransition.hbs créé sous app / templates / avec le code suivant -

<h2>Hello...Welcome to Tutorialspoint!!!</h2>
{{outlet}}

Production

Exécutez le serveur de braises et vous recevrez la sortie suivante -

Lorsque vous cliquez sur le lien, il affichera les données. Mais si vous cliquez sur le lien retour, l' action willTransition appelle la méthode transition.abort () puis transition.retry () .