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 () .