[ Ember not updating query parameters when calling transitionToRoute() right after ]
In my application, I have an overall controller that manages state for a portion of the application, called SimpleSearch
.
Within SimpleSearch
, I have multiple SimpleSearchOption
s, that display a list of choices to a user.
A user can select an option, and that selection is an action that is called from the view, that bubbles up to the SimpleSearchOptionController
:
App.SimpleSearchOptionController = Ember.ObjectController.extend({
//....
select: function (option) {
option.queryName = this.get('queryName');
this.get('simpleSearch').setSelection(option);
this.set('selectedOption', option);
this.set('hasSelectedOption', true);
this.send('transitionToNextOption');
},
//....
This action calls this.get('simpleSearch').setSelection(option);
, which registers the selection with the SimpleSearchController
:
App.SimpleSearchController = Ember.ObjectController.extend({
//....
setSelection: function (option) {
this.set(option.queryName, option.value);
this.get('selectedOptions').set(option.queryName, option.value);
this.get('model').notifyPropertyChange('selectedOptions');
this.checkIfAllOptionsSelected();
},
//....
The important line in there is: this.set(option.queryName, option.value);
.
After it registers the selection, it moves to the next option, and if there isn't one, it skips to the results of the search. That is called from this.send('transitionToNextOption');
App.SimpleSearchOptionController = Ember.ObjectController.extend({
//....
transitionToNextOption: function () {
var nextOptionId = parseInt(this.get("id")) + 1;
var numOfOptions = this.get('simpleSearch.numOfOptions');
if (nextOptionId < numOfOptions) {
this.transitionToRoute('simpleSearchOption', nextOptionId);
}
else {
this.transitionToRoute('simpleSearchResults');
}
},
//....
In setSelection()
above, the line this.set(option.queryName, option.value);
is setting a query parameter's value. This only works correctly, and the url gets updated accordingly for all options, when I'm not transitioning to a different route.
If I comment out the lines:
else {
this.transitionToRoute('simpleSearchResults');
}
Setting the property (this.set(option.queryName, option.value);
) actually has the side effect of Ember updating the query parameter in the URL, which is my intent. If I include that line, and transition to a different route after setting that variable, the query parameter is not updated.
I was stepping through Ember's code, but I can't quite follow how it handles this. It continues into _doTransition()
, and I've noticed that the transition to the route 'simpleSearchResults' always happens before the queryParams are passed through.
How do I get Ember to update the query parameter before it transitions to 'simpleSearchResults'?
Thank you for any and all help.
Answer 1
I solved my issue by wrapping the transition in an Ember.run.next()
function:
transitionToNextOption: function () {
var nextOptionId = parseInt(this.get("id")) + 1;
var numOfOptions = this.get('simpleSearch.numOfOptions');
if (nextOptionId < numOfOptions) {
this.transitionToRoute('simpleSearchOption', nextOptionId);
}
else {
var self = this;
Ember.run.next(function() { self.transitionToRoute('simpleSearchResults'); });
}
},
I'm assuming, but have not verified, that Ember was queuing up the action to transition to 'simpleSearchResults', and handles the query parameters similarly. Perhaps the transition to a different route was somehow interrupting or overwriting the query parameter being written to the URL.