Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Turn off sticky query params in Ember.js

I found a jsbin that illustrates my problem. http://emberjs.jsbin.com/ucanam/2708.

That last link, where there are no explicit query-params set on the link-to, it uses the current sticky query param value on the controller. It there a way to turn this sticky feature off? Would doing so break other scenarios?

My current solution is to null out query params on every route I want cleared:

export default Ember.Route.extend({
  deactivate: function() {
    var controller = this.controllerFor(this.get('controllerName'));
    var queryParams = controller.get('queryParams');
    for (var i = 0; i < queryParams.length; i++)
      controller.set(queryParams[i], null);
  }
});

This works but it seems like there should be an easier way.

I should note that doing something like {{#link-to 'route' (query-params val=null)}}{{/link-to}} for every route is not an option because I have some reusable code where the route is a variable, so I won't know the query params I have to null out.

Edit:

Here is the proper way to do it, in case the doc's from the answer change:

export default Ember.Route.extend({
  resetController: function(controller, isExiting) {
    if (isExiting) {
      var queryParams = controller.get('queryParams');
      for (var i = 0; i < queryParams.length; i++)
        controller.set(queryParams[i], null);
    }
  }
});

Edit 2:

It's now very easy to do this via this addon https://github.com/kellyselden/ember-query-params-reset. It also resets to the original values, not just nulling out values.

like image 872
Kelly Selden Avatar asked Oct 21 '14 13:10

Kelly Selden


People also ask

Why are query Param values in Ember sticky?

By default, query param values in Ember are "sticky", in that if you make changes to a query param and then leave and re-enter the route, the new value of that query param will be preserved (rather than reset to its default).

What are query params?

Query parameters are optional key-value pairs that appear to the right of the ? in a URL. For example, the following URL has two query params, sort and page, with respective values ASC and 2:

How do I trigger a model refresh from a query Param?

If you have a category query param and you want it to trigger a model refresh, you can set it as follows: By default, Ember will use pushState to update the URL in the address bar in response to a controller query param property change.

Why is my query Param not serializing to the URL?

When a controller's query param property is currently set to its default value, this value won't be serialized into the URL. So in the above example, if page is 1, the URL might look like /articles , but once someone sets the controller's page value to 2, the URL will become /articles?page=2.


1 Answers

It gives you two options for how to handle this in the guides: https://guides.emberjs.com/release/routing/query-params/#toc_sticky-query-param-values

Looks like option #2 is pretty close to what you are doing:

use the Route.resetController hook to set query param values back to their defaults before exiting the route or changing the route's model.

like image 143
atomkirk Avatar answered Sep 20 '22 02:09

atomkirk