Router che sceglie una transizione completa

È possibile utilizzare la configurazione queryParams facoltativa quando una proprietà del parametro di query del controller viene modificata per accettare una transizione completa impostando la proprietà di configurazione refreshModel su true. Gli argomenti transitTo o link-to cambieranno nei valori dei parametri della query, ma non cambieranno nella gerarchia del percorso; le proprietà del controller verranno aggiornate con i nuovi valori dei parametri della query anche nell'URL.

Sintassi

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

Esempio

L'esempio riportato di seguito mostra la scelta di una transizione completa quando una proprietà param della query del controller cambia. Crea una nuova rotta e chiamala paramfulltrans 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('paramfulltrans');
});

//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>Opting Into a Full Transition</h2>
{{#link-to 'paramfulltrans'}}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 paramfulltrans.hbs per attivare una transizione completa utilizzando la configurazione queryParams -

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

Ora definisci la proprietà calcolata dell'array filtrato queryParam che visualizzerà il modello 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'));
      }
   }
});

Ora usa la configurazione queryParams sulla route con il rispettivo controller e imposta la proprietà di configurazione refreshModel su true nel file paramfulltrans.js definito in app / routes / .

import Ember from 'ember';

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

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 e inviare un'azione al metodo addQuery -

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