How to change query parameters in ember.js?

1
2
3
4
5
6
7
8
9

// app/controllers/example-controller.js

import Controller from '@ember/controller';

export default Controller.extend({
  queryParams: ['param1', 'param2'], // define query parameters
  param1: null,
  param2: null
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// app/routes/example-route.js

import Route from '@ember/routing/route';

export default Route.extend({
  actions: {
    updateQueryParams() {
      this.controller.set('param1', 'new value'); // change query parameter
      this.controller.set('param2', 'new value');
    }
  }
});

1
2
3
4
5

<!-- app/templates/example-template.hbs -->

{{input type="text" value=param1}} <!-- bind input value to query parameter -->
{{input type="text" value=param2}}
<button {{action "updateQueryParams"}}>Update</button>