Routeur optant pour une transition complète

Vous pouvez utiliser la configuration optionnelle queryParams lorsqu'une propriété de paramètre de requête de contrôleur change pour opter pour une transition complète en définissant la propriété refreshModel config sur true. Les arguments transitionTo ou link-to changeront dans les valeurs des paramètres de requête, mais ne changeront pas dans la hiérarchie des itinéraires; les propriétés du contrôleur seront également mises à jour avec de nouvelles valeurs de paramètre de requête dans l'URL.

Syntaxe

Ember.Route.extend ({
   queryParams: {
      queryParameterName: {
         refreshModel: true
      }
   }
});

Exemple

L'exemple ci-dessous montre l'option d'une transition complète lorsqu'une propriété de paramètre de requête de contrôleur change. Créez une nouvelle route et nommez-la paramfulltrans et ouvrez le fichier router.js 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
});

//Defines URL mappings that takes parameter as an object to create the routes
Router.map(function() {
   this.route('paramfulltrans');
});

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

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

<h2>Opting Into a Full Transition</h2>
{{#link-to 'paramfulltrans'}}Click Here{{/link-to}}

Lorsque vous cliquez sur le lien ci-dessus, la page doit s'ouvrir avec une zone de saisie qui prend une valeur saisie par un utilisateur. Ouvrez le fichier paramfulltrans.hbs pour opter pour une transition complète à l'aide de la configuration queryParams -

//sending action to the addQuery  method
<form {{action "addQuery" on = "submit"}}>
   {{input value = queryParam}}
   <input type = "submit" value = "Send Value"/>
</form>
{{outlet}}

Définissez maintenant la propriété calculée du tableau filtré queryParam qui affichera le modèle paramfulltrans -

import Ember from 'ember';

export default Ember.Controller.extend ({
   //specifying 'query' as one of controller's query parameter
   queryParams: ['query'],
   
   //initialize the query value
   query: null,

   //defining a computed property queryParam
   queryParam: Ember.computed.oneWay('query'),
   actions: {
      addQuery: function () {
         
         //setting the query parameters and displaying it
         this.set('query', this.get('queryParam'));
         document.write(this.get('query'));
      }
   }
});

Utilisez maintenant la configuration queryParams sur la Route avec le contrôleur respectif et définissez la propriété refreshModel config sur true dans le fichier paramfulltrans.js défini sous app / routes / .

import Ember from 'ember';

export default Ember.Route.extend ({
   queryParams: {
      query: {
         //opting into full transition
         refreshModel: true
      }
   }
});

Production

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

Lorsque vous cliquez sur le lien, cela génère une zone de saisie dans laquelle vous pouvez entrer une valeur et envoyer une action à la méthode addQuery -

Après avoir cliqué sur le bouton, il affichera la valeur du paramètre à droite du "?" Dans une URL -