Transition to same route with other query params

#1

Hi all,

I have 2 problems in my Application:

Question 1: For example I have opened the following route: /marketplace/customers

Is there a possibility to make a transitionTo to the same route again but with other query params? For example: /marketplace/customers // empty search result list /marketplace/customers?c=123&email=xxx@abc.de /marketplace/customers?c=321&email=aaa@bbb.de

The problem is: In first step I am in this route… /marketplace Here will be rendered a little component with a search form After submit, I trigger a transitionTo with these query params like /marketplace/customers?c=123&email=xxx@abc.de. Now the search component is still displayed. If I submit a new search the same route like /marketplace/customers?c=321&email=aaa@bbb.de will be triggered but the model() method will not be called again.

Question 2: It’s possible to change the url by transitionTo with query params?

Best regards, Mario

#2

Yes, just omit the route name and specify your query params. To control whether or not your model hook runs, use the queryParams options in the route object. The guides have a very good write up on this technique.

#3

Hi Chris,

Thanks for this tip. We have test it to call our same transition with other data but nothing happens. When we debug into the deeps of ember we see that ember lost or remove our new or changed queryParams for the current transition.

Our search component action:

search() {
    this.get('router').transitionTo({ 
        queryParams: { 
            cno: this.get('customerNo'),
            email: this.get('email')
        }
    });
}

In our target route ( same route ) we use the queryParams to call related REST requests. But ember only jump into the model method at first time. If we submit our search with other params ember doesn’t jump into the model method again. Here the code:

model(params/*, transition*/) {
    return RSVP.hash({
        customer: this.get('store').find('customer', params.customer_no),
        orders: this.get('store').query('order', {
            'cno': params.customer_no
        })
    });
}

Whats wrong? Thanks…

Mario

#4

Ack. Typing on my phone and can’t format the code…

In the route, you need : queryParams: { cno: { refreshModel: true }, Email:{ refreshModel:true }, model()…

In the controller, { queryParams : [‘cno’,‘email’] …

By the way, I have not attempted this from a component, only a controller or route. What I would recommend is to signal to the containing route that “something happened”, (itemClicked) and let the route determine what response to take (transition to). Doing so will make both more plug-n-play.

#5

Hi,

Promlem solved. Solution was

  1. just to set this object definition in our target route

    queryParams: { cno: { refreshModel: true }, email:{ refreshModel: true } }

  2. Set the specific route name for tranitionTo. But this could be because of our related route structures.

Thanks alot again…

Best regards, Mario