Append query parameters after queryParam update in Ember.js

Question

I defined the queryParams in the controller and I need to add additional query parameters which is not used in the Ember application and it can have any name. It's an analytics thing. Those query parameters are not known in advance thus, we are not able to define those analytics values in the queryParams property. What happens now is Ember deletes all additional parameter after the queryParams and URL binding is triggered.

Example:

In the Controller:

queryParams: ['fin', 'ftw'],
fin: null,
ftw: null,

url:

localhost:3000?fin=111&ftw=121&anatylicsvalue=1

when I change the value of fin or ftw, anatylicsvalue is removed. I need the app to retain that bit of string.

What is the best way of doing this?

feanor07 feanor07 · Accepted Answer · 2017-06-26T14:20:17

You need to define analyticsvalue within queryParams array of the controller, or queryParams json object of the router whether or not it is going to be used by the controller. So, if you declare queryParams as ['fin', 'ftw', 'analyticsvalue'] it will retain.

In order to achieve a somewhat dynamic query parameter (where even the name of the parameter is not known in advance), the only option I can suggest is using a named query parameter and using JSON.stringify to put the query parameters with that name. Take a look at the following twiddle. index.js route defines queryParams as queryParams: ['fin', 'ftw', 'additionalParams'] and additionalParams query parameter holds dynamic parameters since it is a JSON object that can hold any dynamic sub-parameter. Take a look at the updateAdditionalParams inside actions it defines a dynamic property and dynamic values as you can see.

Unfortunately, Ember does not support custom query parameters that are not known in advance. You can use the approach I have illustrated in the twiddle. Hope this helps.

Append query parameters after queryParam update in Ember.js

2 Answers