Enrutador que especifica parámetros de consulta

Puede especificar los parámetros de consulta en los controladores controlados por rutas que pueden enlazarse en la URL y configurar los parámetros de consulta declarándolos en el controlador para activarlos. Puede mostrar la plantilla definiendo una propiedad calculada del filtro de parámetros de consulta de una matriz.

Sintaxis

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

Ejemplo

El ejemplo que se muestra a continuación muestra la especificación de parámetros de consulta en controladores controlados por rutas. Cree una nueva ruta y asígnele el nombre Specifyquery 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('specifyquery');
});

//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>Specifying Query Parameters</h2>
{{#link-to 'specifyquery'}}Click Here{{/link-to}}

Al hacer clic en el enlace anterior, la página debería abrirse con un formulario. Abra el archivo specifquery.hbs para enviar los parámetros en los controladores controlados por rutas -

//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 de specifyquery -

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'));
      }
   }
});

Salida

Ejecute el servidor ember y recibirá el siguiente resultado:

Cuando haga clic en el enlace, proporcionará un cuadro de entrada para ingresar un valor y enviará una acción al método addQuery:

Después de hacer clic en el botón, muestra los pares clave-valor a la derecha de? en una URL -

↰ Previous page