Ember.js: setting a controller property in `setupController` does not update the query param

Fixed with a Ember.run.later (to ensure that things have fully materialized first): http://emberjs.jsbin.com/kowoqo/1/edit

@machty - What is the expected behavior here?

I thought we had explicit tests for this... checking.

I think this is a bug... we have tests for this but only in the context of a transitionTo and not the initial app bootup.

working: http://jsbin.com/mejeto/1#/about

I have added a failing test for this bug https://github.com/emberjs/ember.js/pull/5473
Will try to take a stab at fixing this

I think I stumbled upon related issue, so I'm not sure if it needs separate ticket here in GitHub.

export default Ember.Controller.extend({
    queryParams: ['modal'],
    modal: null,
    handleModal: function () {
        this.send('openModal', this.get('modal'));
    }.observes('modal')
});

export default Ember.Route.extend({
    actions: {
        openModal: function (name) {
            return this.render(name, {
                into: 'application',
                outlet: 'modal'
            });
        }
    }
});

This works in all cases besides the bootup when it throws Error while processing route: index Nothing handled the action 'openModal'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.

Can be fixed using Ember.run.next

handleModal: function () {
    Ember.run.next(this, function () {
        this.send('openModal', this.get('modal'));
    });
}.observes('modal')

though it feels wrong.

JSBins:
Without Ember.run.next throws error
With Ember.run.next prints 'redered' in console

@Igor10k I'm running into this exact same issue, modal and all. Wrapping it in Ember.run.next fixes it, but it feels wrong to me as well.

Can anyone confirm that this is still an issue in 1.8?

@wagenet yes this is still an issue in 1.8:
http://emberjs.jsbin.com/lezuhu/1/edit?html,js,output

and canary:
http://emberjs.jsbin.com/doyohe/1/edit?html,js,output

@machty - Thoughts?

I think this is also a bug for me too using 1.8.1. What I want to do is call a special method on my controller every time a specific queryParam changes. I have a router that looks something like this.
Any advice?

// ...snip...

// for pagination
queryParams: {
  offset: {
    refreshModel: true
  }
},

model: function(params) {
  // returns model
},

setupController: function(controller, model) {
  this._super(controller, model);
  controller.set('model', model);

  // Fetch results is a method that does a bunch work
  // sets up some filters, generates a promise, resolves that promise
  // and then sets some array data on the controller once promise resolves.
  // offset is a pagination feature which determines which specific results
  // are fetched. I would like to be able to call fetchResults everytime the
  // offset queryParam is changed. 
  Ember.run.later(function() {
    controller.sendAction('fetchResults');
  })
}

// ...snip...

@machty - Ideas on where to start digging on this?

I'm having the same problem. this.set() in the controller will not update query parameter in the URL

App.SearchController = Ember.Controller.extend({
queryParams: ['domain'],
domain: null,

domainField: Ember.computed.oneWay('domain'),
actions: {
searchSubmit: function() {
this.set('domain', this.get('domainField')); // This sets the 'domain' parameter but doesn't modify the URL. So the model in App.SearchRoute is never being called as expected
}
},
});

App.SearchRoute = Ember.Route.extend({
queryParams: {
domain: {
refreshModel: true // Opt into full transition
},

},
model: function(params) {
var domain = params.queryParams.domain;

  return $.getJSON('/search?domain=usv.com&name=').then(function(resp){
  console.log(resp);
  return resp.data;
});

},
actions: {
refresh: function() {
Ember.Logger.log('Route is now refreshing...');
this.refresh();
}
},
});

Can you please provide a work around in the interim?

To clarify: this.set() in my code will make the change to the Class object, but doesn't change the URL at all

This is ancient, but seems like it’s still a problem? I can’t figure out the circumstances, but periodically when I try to set a query parameter from the controller, it doesn’t propagate to the URL. I can check the value of the property on the controller and it’s correctly set, but the URL hasn’t changed. I tried using an Ember.run.next to no avail. Woe!

Experiencing this issue too

@rwjblue: Is there any update on this?

Any update? Here even when changing the value from the controller, the url updates for a couple ms and it goes back to the old value, even if the controller has the new value in the variable

Here's a workaround:

In the controller, add an observer that changes the query param in the next run loop after it has been set. In this example, I wanted to remove the token query param from the URL and this approach works nicely.

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['token'],

  token: null,

  unsetToken: Ember.observer('token', function() {
    if (this.get('token')) {
      Ember.run.next(this, function() {
        this.set('token', null);
      });
    }
  }),
});

Just ran into this today, when I tried to set a query parameter from the setupController on boot. run.next seems like a workaround, but i think proper solution would be to have 2 routes and on boot first route would do transitionTo second route with the query parameter value.

Ember 2.8

Marking issue a inactive as per our triage policy.

I too am seeing this issue on Ember 2.11, trying to clear a query param in the controller has no effect, @barelyknown 's workaround gets me most of the way there but I would still consider this an open bug.

EDIT: Ignore all this jazz. There's some bad/wrong information here, and @locks pointed me towards a much better solution—with a query parameter instead of a dynamic segment—in-line immediately below. It binds the query parameter to a normal property with a shadow computed property that sanitizes and sets on get (my previous attempts involved binding the query parameter to a computed property that sanitized and set on set). Sorry for the noise!

// app/router.js
Router.map(function() {
  this.route('shop');
});

// app/routes/shop.js
export default Ember.Route.extend({
  queryParams: {
    _selectedItemIndex: {
      replace: true
    }
  }
});

// app/controllers/shop.js
import computed from 'ember-macro-helpers/computed';

export default Ember.Controller.extend({
  cart: Ember.service.inject(),

  queryParams: {
    _selectedItemIndex: 'i'
  },

  _selectedItemIndex: 0,

  selectedItemIndex: computed('_selectedItemIndex', {
    get(index) {
      const itemsLength = this.get('cart.items.length');

      if (isNaN(index) || index < 0 || index >= itemsLength) {
        index = 0;
      }

      return this.set('_selectedItemIndex', index);
    },

    set(index) {
      return this.set('_selectedItemIndex', index);
    }
  })
});

// app/router.js
Router.map(function() {
  this.route('shop', function() {
    this.route('index', { path: '/' });
    this.route('select', { path: '/:index' });
  });
});

// app/routes/shop.js
export default Ember.Route.extend({
  setupController(controller, model) {
    this._super(...arguments);

    // some logic to set up the cart service
  },

  model() {
    // fetch products to shop
  }
});

// app/controllers/shop.js
export default Ember.Controller.extend({
  cart: Ember.service.inject(),

  selectedItemIndex: 0,

  actions: {
    selectItem(index) {
      return this.replaceRoute('shop.select', index);
    }
  }
});

// app/routes/shop/index.js
export default Ember.Route.extend({
  beforeModel() {
    return this.replaceWith('shop.select', 0);
  }
});

// app/routes/shop/select.js
export default Ember.Route.extend({
  setupController(_, { index }) {
    this._super(...arguments);

    const
      parentController = this.controllerFor('shop'),
      itemsLength = parentController.get('cart.items.length');

    index = parseInt(index, 10);
    if (Number.isNaN(index) || index < 0 || index >= itemsLength) {
      return this.replaceWith('shop.index');
    }

    parentController.set('selectedItemIndex', index);
  },

  model: _ => _
});

@mwpastore thanks for the update we'll close this out. Have a great weekend!

@locks if you want please reopen a documentation issue to note this on the setupController (see the notes in dropdowns by @mwpastore as examples.

@mwpastore Sounds like we could follow up with a post on the forum on https://discuss.emberjs.com/ with your solution

Wait so this issue got closed with an alternate solution to work around the bug it reports, and that solution involves setting a property in a computed getter?

I'm curious if there's update on this.

I'm using Ember.run.next inside Route's setupController