Routeur spécifiant les paramètres de requête

Vous pouvez spécifier les paramètres de requête sur les contrôleurs pilotés par route qui peuvent se lier dans l'URL et configurer les paramètres de requête en les déclarant sur le contrôleur pour les rendre actifs. Vous pouvez afficher le modèle en définissant une propriété calculée du filtre de paramètre de requête d'un tableau.

Syntaxe

Ember.Controller.extend ({
   queryParams: ['queryParameter'],
   queryParameter: null
});

Exemple

L'exemple ci-dessous montre la spécification des paramètres de requête sur les contrôleurs pilotés par route. Créez une nouvelle route et nommez-la comme specquery 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('specifyquery');
});

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

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

<h2>Specifying Query Parameters</h2>
{{#link-to 'specifyquery'}}Click Here{{/link-to}}

Lorsque vous cliquez sur le lien ci-dessus, la page devrait s'ouvrir avec un formulaire. Ouvrez le fichier specifyquery.hbs pour envoyer les paramètres sur les contrôleurs pilotés par route -

//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 de requête de spécification -

import Ember from 'ember';

export default Ember.Controller.extend ({
   //specifying the '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 up the query parameters and displaying it
         this.set('query', this.get('queryParam'));
         document.write(this.get('query'));
      }
   }
});

Production

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

Lorsque vous cliquez sur le lien, il fournira une zone de saisie pour entrer une valeur et envoie une action à la méthode addQuery -

Après avoir cliqué sur le bouton, il affiche les paires valeur / clé à droite du? dans une URL -