lundi 28 décembre 2015

Why does an ember link-to combined with queryParams cause this exception: "TypeError: delegate is not a function"?

Somehow, I am getting a conflict between the link-to helper, an aliased controller property, and a declared query parameter. Specifically, I've defined a controller with a query parameter bound to the property of an injected controller. Then I get an exception if I set the injected controller's property BEFORE initializing the controller with the query parameter.

Basically, I want to be able to navigate from one route to another but by first setting a query parameter in the route I'm navigating to. Earlier, I tried doing this by simply passing queryParams as an optional argument to the transitionToRoute() method, but this is not available when already at that route. And besides, I'm very curious why this exception is turning up at all. The code seems innocent enough!

The heart of the code are the 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 the / route to start, click the button and then the my-route link, 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 navigate between the links back and forth, before clicking the button, then there is no exception!

Here is an Ember Twiddle to illustrate. http://ift.tt/1PtzvfB




Aucun commentaire:

Enregistrer un commentaire