Ember Route Query Params

Question

i would like to open a new perspective with query params.

That means in my index.hbs i click a button get the value from the input field. After that i will open a new route in my case map-view with path '/map' with query params like

localhost:4200/map/?search=xyz

when i do in my index controller:

queryparams:['location'],
location:null,

and in my route

  actions:{
    search(location){
      this.transitionTo('map-view');
  }
}

i get on my index url instantly

/?location=xcyxyx

but i want on my map route

localhost:4200/map/?search=xyz

Answer 1

Define search property in index.js controller, use it for queryParams value transitioning to map-view route.

index.hbs

{{input value=search}}
<br />
<button {{action 'transitionToLocation'}}> Search</button>

controllers/index.js - refer transitionToRoute

import Ember from 'ember';
export default Ember.Controller.extend({
  search:'india',
  actions:{
    transitionToLocation(){
      this.transitionToRoute('map-view',{queryParams: {search: this.get('search')}});
    }
  }
});

routes/map-view.js
Define queryParams search with refreshModel true then this will force to fire beforeModel and model and afterModel hook for search property change.

import Ember from 'ember';
export default Ember.Route.extend({
  queryParams:{search: {refreshModel:true}},
});