Enrutador que opta por una transición completa

Puede usar la configuración opcional queryParams cuando cambia la propiedad de un parámetro de consulta del controlador para optar por una transición completa estableciendo la propiedad de configuración refreshModel en true. Los argumentos transitTo o link-to cambiarán en los valores de los parámetros de consulta, pero no cambiarán en la jerarquía de la ruta; las propiedades del controlador también se actualizarán con nuevos valores de parámetros de consulta en la URL.

Sintaxis

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

Ejemplo

El ejemplo que se muestra a continuación muestra cómo optar por una transición completa cuando cambia una propiedad de parámetro de consulta del controlador. Cree una nueva ruta y asígnele el nombre paramfulltrans y abra el archivo router.js para definir las asignaciones de 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;

Abra el archivo application.hbs creado en app / templates / con el siguiente código

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

Cuando hace clic en el enlace anterior, la página debe abrirse con un cuadro de entrada que toma un valor ingresado por un usuario. Abra el archivo paramfulltrans.hbs para optar por una transición completa mediante la configuración de queryParams :

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

Ahora defina la propiedad calculada de la matriz filtrada queryParam que mostrará la plantilla 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'));
      }
   }
});

Ahora use la configuración queryParams en la ruta con el controlador respectivo y establezca la propiedad de configuración refreshModel en true en el archivo paramfulltrans.js definido en app / routes / .

import Ember from 'ember';

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

Salida

Ejecute el servidor ember y recibirá el siguiente resultado:

Cuando haga clic en el enlace, generará un cuadro de entrada en el que puede ingresar un valor y enviar una acción al método addQuery -

Después de hacer clic en el botón, se mostrará el valor del parámetro a la derecha de "?" En una URL -

↰ Previous page