this.paramsFor(routeName) with the routeName of a route not previously visited

[fknoll]

Using

Ember      : 2.6.1
Ember Data : 2.6.1
jQuery     : 2.2.4

It seems like using this.paramsFor(routeName) with the routeName of a route not previously visited makes my application fail - not immediately, but later on, when I transition to the route.

When starting my application, I want automatically to show a specific route reg directly nested under the application route.

For route reg I have defined two query parameters - queryParam1 and queryParam2.

In the model() method for application route the default values for those two query parameters are found and saved in defaultQueryParam1 and defaultQueryParam2.

To secure that the navigation to route reg is not already requested via the url http://localhost:4200/reg?queryParam1=xxx&queryParam2=yyy, I am testing for the existence of the query parameter values before requesting the default transition to reg.

For that purpose I have defined

redirect() {
    if ( Ember.isEmpty( this.paramsFor('reg').queryParam1 ) &&
         Ember.isEmpty( this.paramsFor('reg').queryParam2) ) {

      this.transitionTo('reg', {
        queryParams: {
                        queryParam1: this.get('defaultQueryParam1'),
                        queryParam2: this.get('defaultQueryParam2')
                      }
      });

    } // end-if
  },

When using the url http://localhost:4200/reg?queryParam1=xxx&queryParam2=yyy, everything seems to work nice and smoothly.

However, when I use the default start application url http://localhost:4200/ I get this two fatal errors:

ember.debug.js:27773
Error while processing route: regSummary.index delegate is not a function TypeError: delegate is not a function
    at Class._qpChanged (http://localhost:4200/assets/vendor.js:33405:7)
    at Object.apply (http://localhost:4200/assets/vendor.js:32605:18)
    at Object.sendEvent (http://localhost:4200/assets/vendor.js:26069:28)
    at notifyObservers (http://localhost:4200/assets/vendor.js:29972:25)
    at propertyDidChange (http://localhost:4200/assets/vendor.js:29799:5)
    at Object.notify (http://localhost:4200/assets/vendor.js:23823:9)
    at chainsDidChange (http://localhost:4200/assets/vendor.js:29888:9)
    at Object.propertyDidChange (http://localhost:4200/assets/vendor.js:29798:5)
    at Object.set (http://localhost:4200/assets/vendor.js:30199:38)
    at http://localhost:4200/assets/vendor.js:36057:37logError @ ember.debug.js:27773

ember.debug.js:31387
TypeError: delegate is not a function
    at Class._qpChanged (ember.debug.js:23279)
    at Object.apply (ember.debug.js:22479)
    at Object.sendEvent (ember.debug.js:15943)
    at notifyObservers (ember.debug.js:19846)
    at propertyDidChange (ember.debug.js:19673)
    at Object.notify (ember.debug.js:13697)
    at chainsDidChange (ember.debug.js:19762)
    at Object.propertyDidChange (ember.debug.js:19672)
    at Object.set (ember.debug.js:20073)
    at ember.debug.js:25931

[Serabe]

Can you please try to replicate the bug in a Twiddle, please. Thank you!

[fknoll]

Hallo @Serabe,

See first part of a twiddle reproduction here .

Try URL: /character?firstName=Snif
Unfortunately twiddle does not display the error, that I see in Console on my own PC:

TypeError: Cannot read property 'name' of undefined
    at Class.finalizeQueryParamChange (ember.debug.js:25494)
    at Object.triggerEvent (ember.debug.js:27775)
    at Object.trigger (ember.debug.js:51084)
    at finalizeQueryParamChange (ember.debug.js:50214)
    at Object.queryParamsTransition (ember.debug.js:49592)
    at Object.getTransitionByIntent (ember.debug.js:49505)
    at Object.transitionByIntent (ember.debug.js:49610)
    at doTransition (ember.debug.js:50182)
    at Object.transitionTo (ember.debug.js:49679)
    at Class._doTransition (ember.debug.js:27486)onerrorDefault @ ember.debug.js:31344trigger @ ember.debug.js:52087(anonymous function) @ ember.debug.js:53338invoke @ ember.debug.js:333flush @ ember.debug.js:397flush @ ember.debug.js:205end @ ember.debug.js:560run @ ember.debug.js:682join @ ember.debug.js:702run.join @ ember.debug.js:20313(anonymous function) @ ember.debug.js:20376fire @ jquery.js:3187fireWith @ jquery.js:3317ready @ jquery.js:3536completed @ jquery.js:3552

Any proposals about how to avoid the transition in app/routes/application.js method redirect(), when the application is started with an URL including a route?

  redirect() {

    // Avoid transition when application is started via URL link
    // including target route "character" and query parameter, fx.
    // http://localhost:4200/character?firstName=Snif
    // But, how?

    if ( this.modelFor('application').length > 0 ) {

      this.transitionTo('character', {
        queryParams:  {
                        firstName: this.modelFor('application').get('firstObject').get('firstName')
                      }
      });

    }

  } // end-redirect()

[pixelhandler]

@fknoll is the character route the default route? could use this.route('character', {path: '/'}); to make it so.

[Serabe]

Hello, @fknoll:

I cannot see any paramsFor in your Twiddle. Can you please provide the twiddle with the paramsFor problem? It looks like the problem in your second comment is different that the one in the original post. If you cannot get to reproduce it in a twiddle but you can reproduce it in a small project, please, upload it to GitHub and I'll take a look there.

Thank you!

[pixelhandler]

@fknoll have you reached out in the #-help channel of the embercommunity.slack.com chatroom? I'm curious if this may be more of a support need than an Ember bug.

[fknoll]

Just returned from a short vacation - I apologize for lack of responsiveness.

I insist on my initial finding: using this.paramsFor(<routeName>) makes Ember fail - not immediately, but later on, when doing a transition to <routeName>.

I have created this reproducible scenario on Ember Twiddle:
https://ember-twiddle.com/c73b62574ff88d64d07bd58e61140001?openFiles=routes.application.js

Look for this code in routes/application.js:

    // If the LET statement below is commented out,
    // then this twiddle example works fine!
    let requestedQueryParam = this.paramsFor('character').firstName;

[fknoll]

@pixelhandler Thank you so much for your input - it is appreciated. I understand your proposal! Yes, it might be a simple and usable workaround just to avoid my default transition in routes/application.js. But I have a default transition including query parameters, and I do not know how to handle that scenario by setting this.route('character', {path: '/'}).

[pixelhandler]

@fknoll can the character controller just set a value for firstName: null e.g. in setupController of route or in the code? (i.e. change null to 'something') ?

this.paramsFor(routeName) with the routeName of a route not previously visited

I'm curious, perhaps I should not expect to have the 'params' available from a controller that was "not previously visited". Looking up the params in the application route for the params for a controller in a child route that has not been visited yet seems like an issue on the subject of "putting the cart before the horse". Which is why I suspect that there is perhaps a different implementation for your use case.

In the model() method for application route the default values for those two query parameters are found and saved in defaultQueryParam1 and defaultQueryParam2.

What about using the setupController hook in the child route to lookup saved properties on the application route and set them on the controller now that it's ready?

[dguettler]

Anybody willing to take a look at the test for this? The code change fixes the issue in above twiddle example.
The test would need to call paramsFor before the _qpDelegate method is called so a _qpChange is triggered before _qpDelegate is assigned

[pixelhandler]

@fknoll we discussed this issue a bit an the bottom line is… if a route hasn't been visited, it doesn't have paramsFor.

[pixelhandler]

The docs need clarity, see http://emberjs.com/api/classes/Ember.Route.html#method_paramsFor

This issue is more of a documentation issue Route#paramsFor needs to be used in a timely fashion. The route instance has a lifecycle and the model hook receives the params. paramsFor can't expect that any route in the app has a value for it's params, or that any route in the app has been instantiated. Ideally it should be used in a route, looking up it's own params after the model hook is fired, or looking up params from a parent route since that route has been setup already.