EmberJS - Valores de parámetros de consultas permanentes del enrutador

En Ember, los valores de los parámetros de consulta son fijos de forma predeterminada; De manera que cualquier cambio realizado en el parámetro de consulta, el nuevo valor del parámetro de consulta se conservará al volver a ingresar a la ruta.

Sintaxis

Ember.Controller.extend ({
   queryParams: ['paramValue'],
   paramValue:true/false
});

Ejemplo

El ejemplo que se muestra a continuación especifica el uso de valores de parámetros de consulta fijos. Cree una nueva ruta y asígnele el nombre stickyqueryparam 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('stickyqueryparam');
});

//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>Sticky Query Param Values</h2>
{{#link-to 'stickyqueryparam'}}Click here to open the page{{/link-to}}

Al hacer clic en el enlace anterior, se abre la página de plantilla de parámetros de consulta adhesiva. El archivo stickyqueryparam.hbs contiene el siguiente código:

<h2>My Page</h2>
{{link-to 'Show' (query-params showThing=true)}}
{{link-to 'Hide' (query-params showThing=false)}}
<br>
{{#if showThing}}
   <b>Welcome to Tutorialspoint..</b>
{{/if}}
{{outlet}}

Ahora abra el archivo stickyqueryparam.js creado en app / controllers / con el siguiente código:

import Ember from 'ember';

export default Ember.Controller.extend ({
   queryParams: ['showThing'],
   //showThing would be false, if only the route's model is changing
   showThing: false
});

Salida

Ejecute el servidor ember y recibirá el siguiente resultado:

Al hacer clic en el enlace, se abrirá la página de la plantilla de parámetros de consulta adhesiva proporcionando Mostrar y Ocultar enlaces:

Al hacer clic en el enlace Mostrar , se mostrará el texto y el enlace Ocultar oculta el texto.

↰ Previous page