Why does the ember link in conjunction with queryParams raise this exception: "TypeError: delegate is not a function"?

Question

Somehow, I get a conflict between link-to helper, the aliased controller property and the declared request parameter. In particular, I defined a controller with a query parameter associated with the property of the injected controller. Then I get an exception if I set the property of the entered controller before starting the controller initialization with the query parameter.

Basically, I want to be able to move from one route to another, but first by setting the query parameter in the route I'm moving to. I used to try to do this by simply passing queryParams as an optional argument to transitionToRoute (), but this is not available when already on this route. And besides, I am very curious why this exception generally arises. The code seems innocent!

The heart of the code are two controllers.

// application.controller.js
export default Ember.Controller.extend({
  appValue:'before',
  actions: {
    clickMe() {
      this.set('appValue', 'after');
    }
  }
});

and

// my-route.controller.js
export default Ember.Controller.extend({
  queryParams: ['myValue'],
  application: Ember.inject.controller(),
  myValue: Ember.computed.alias('application.appValue')
});

Now consider this template

// application.template.hbs
{{link-to 'application' 'application'}}
{{link-to 'my-route' 'my-route'}}
<button {{action 'clickMe'}}>clickMe</button>
{{appValue}}

If I load a route /to run, click the button and then the link my-route, I get this exception.

TypeError: delegate is not a function
at _emberRuntimeMixinsController.default.reopen._qpChanged (ember.debug.js:23076)
at Object.apply (ember.debug.js:22250)
at Object.sendEvent (ember.debug.js:16127)
at notifyObservers (ember.debug.js:19666)
at propertyDidChange (ember.debug.js:19493)
at Object.ChainWatchers.notify (ember.debug.js:13756)
at chainsDidChange (ember.debug.js:19582)
at propertyDidChange (ember.debug.js:19492)
at ember.debug.js:19568
at Meta._forEachIn (ember.debug.js:17831)

And yet, if I first go between the links back and forth before clicking the button, then there is no exception!

Here is an illustration of Ember Twiddle for illustration. https://ember-twiddle.com/548612c28a62ad28bca5

Answer 1

tweedle queryParam , queryParam, .

queryParam , .

jsbin ember docs.// , , .

,

//

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['myValue'],
  myValue: Ember.computed.alias('appValue'),
  appValue: 'before',
  actions: {
    clickMe() {
      this.set('appValue', 'after');
    }
  }
});

//

import Ember from 'ember';

export default Ember.Controller.extend({

  application: Ember.inject.controller(),
  myValue: Ember.computed.alias('application.appValue')
});