Changing query param is not shown in the url

Question

I want to click on a "export" button and transit to a route "home" with "export" query param set as true. I don't want this query param to refresh my route. So here is how my route looks like:

export default Route.extend(ApplicationRouteMixin, {
  queryParams: {
    export: {
      refreshModel: false
    }
  }
})

In my controller, i'm trying to observe the query param and call a function which does export for me and after that i want to set the query param back to null. here is my controller:

import Ember from 'ember'
const {Controller, inject} = Ember

export default Controller.extend({
  // == Dependencies ==========================================================
  session: inject.service(),
  // == Keyword Properties ====================================================
  queryParams: ['export'],
  export: null,

  queryParamsObserver: function () {
    if (this.get('export')) {
      this.exportFile()
      this.set('export', null)
    }
  }.observes('export'),

  // == Functions =============================================================
  exportFile () {
  },

  // == Actions ===============================================================
  actions: {
  }

})

But my problem is that when i set the query param to null, it won't change on the url. I'm wondering what i am missing here that is not causing that behavior. Plus that i wonder if using observing query param is the best solution to trigger some actions.

Answer 1

The problem with your case is related with the fact that your setting of export within controller is too early that query params change is not reflected to url. It is not trivial to learn about Ember.run loops. You should start learning about run loops by reading following.

Take a look at the following twiddle, if you wrap the setting of export within Ember.run.scheduleOnce as in the twiddle then you will see export is cleared in the url. (In fact it is immediately removed; you never see it is becoming true; if you wrap both export function and clearing of export flag within a promise; let's say that will resolved after some seconds; then you will see it will become true then will be removed).

Regarding your question about using observers; I cannot see anything you could do with your current design. The reason is that; you are saying refreshModel is false; hence you do not have any hook methods available in route to trigger export function within controller if you are within the same route already. You need to change your design; what ykaragol suggested could be a good starting point.