lundi 4 décembre 2017

EmberJS - Passing Query Params from Controller to Nested Route

I currently have a form with multiple inputs. These inputs are used to populate query params. On the controller for this route a Submit action registers the query param inputs and uses transitionToRoute to load a nested route displaying information that the query returns.

Here is the relevant part of the controller:

import Controller from '@ember/controller';

export default Controller.extend({

  queryParams: ['dateFrom', 'dateTo', 'unitNumber', 'customerName'],
  dateFrom: null,
  dateTo: null,
  unitNumber: null,
  customerName: null,

actions: {
    submitQuery() {
      switch (module) {
        case 'Option 1 List':
          this.transitionToRoute('reports.option1', {
            queryParams: {
              dateFrom: this.get('dateFrom'),
              dateTo: this.get('dateTo'),
              unitNumber: this.get('unitNumber'),
             customerName: this.get('customerName'),
          },
      })

          break;
}

Here is the route that is nested:

import Route from '@ember/routing/route';

export default Route.extend({
  queryParams: {
  dateFrom: { as: 'meddateFrom',
refreshModel:true},
  dateTo: { as: 'meddateTo', refreshModel:true},
  unitNumber: { as: 'medunitNumber', refreshModel:true},
  customerName: { as: 'medcustomerName', refreshModel:true},
},

  model(params) {

      return this.get('store').query('option1api', params)

      },

});

I must be doing something very wrong here because this produces some awful behaviour. I end up with double the query params in the URL string. I also end up with bad param updating behaviour which affects my ability to re-run the queries when the inputs change.

  • If I do not include the queryParams object in the nested route the query does not fire and nothing is produced.

  • If I do not alias the queryParams in the nested route I receive errors telling me that I can not have duplicate Key values in multiple controllers.

  • I tried to uses paramsFor instead of the above queryParams and could not produce a result.

I am also unable to press the Submit button again to launch a fresh query. I assume this is because I am attempting to transition to a route that is already loaded.

I considered moving the queryParams from the controller to the parent route (reports.js) but as I understand it, I need the controller to set the queryParams in the first instance.

This question seemed to be very similar but unfortunately there isn't much of an answer available.

Can anyone spot my big mistake or point me in the right direction? The documentation available at the EmberJS guides hasn't helped my current understanding.




Aucun commentaire:

Enregistrer un commentaire