Router mappa la proprietà di un controller su una chiave parametro query diversa

Il controller dispone di una proprietà di parametro di query predefinita che allega una chiave di parametro di query e mappa una proprietà di controller a una chiave di parametro di query diversa.

Sintassi

Ember.Controller.extend ({
   queryParams: {
      queryParamName: "Values"
   },
   queryParamName: null
});

Esempio

L'esempio riportato di seguito mostra la mappatura della proprietà di un controller su una chiave param di query diversa. Crea un nuovo percorso e chiamalo come parammapcontrol e apri il file router.js per definire le mappature 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('parammapcontrol');
});

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

Apri il file application.hbs file creato in app / templates / con il seguente codice:

<h2>Map a Controller's Property</h2>
{{#link-to 'parammapcontrol'}}Click Here{{/link-to}}

Quando si fa clic sul collegamento sopra, la pagina dovrebbe aprirsi con una casella di input che accetta un valore inserito da un utente. Apri il file parammapcontrol.hbs e aggiungi il codice seguente:

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

Ora apri il file parammapcontrol.js creato in app / controllers / con il seguente codice -

import Ember from 'ember';

export default Ember.Controller.extend ({
   queryParams: [{
      
      //mapping the string 'querystring' of the 'query's' query parameter
      query: "querystring"
   }],
   
   //initialy query's 'query parameter' will be null
   query: null,
   queryParam: Ember.computed.oneWay('query'),
   actions: {
      
      addQuery: function () {
         this.set('query', this.get('queryParam'));
         document.write(this.get('query'));
      }
   }
});

Produzione

Esegui il server ember e riceverai il seguente output:

Quando si fa clic sul collegamento, verrà generata una casella di input in cui è possibile immettere un valore. Questo invierà un'azione al metodo addQuery -

Dopo aver fatto clic sul pulsante, verrà visualizzato il valore del parametro a destra di "?" in un URL -