Lag with search input with transitionTo and queryParams

1

Hi everyone,

I’m having an issue with my search/filters form using transitionTo and the queryParams and I’m wondering how would you guys do it.

For instance:

# component.hbs
= input value=name placeholder="Name" key-up='handleSearch'

# component.js
actions: {
  handleSearch() {
    this.sendAction('handleSearch', this.get('name'));
  }
}

# route.js
queryParams: {
  name: {
    refreshModel: true
  }
},
model(){...},
searchLater: null,
actions: {
  handleSearch(name) {
    var self = this;
    Ember.run.cancel(this.get('searchLater'));
    this.set('searchLater',
      Ember.run.later(function() {
        self.transitionTo(self.routeName, { queryParams: { name: name }});
      }, 200)
    }
  }
}

So far so good, my model get refresh with a small delay to avoid to much call on the api.

The issue here is when I refresh my page or when I hit the previous button my input doesn’t get updated. For instance:

  1. search for moto

  2. search for car

  3. previous page

  4. input value == car but the url is /?name=moto

To solve this issue I’m passing the value of param.name to the component via the controller but now the search experience it’s not working anymore.

Since it’s important that all states are represented by an URL, my search params and filters should be as well present in the URL.

Any ideas ?

2

I couldn’t realize why do want update you querystring this way. Transitions are very expensive operations and you transition to the currently route.