App design: managing complex state with sticky queryParams


I’m new to ember and my first project porting a search filtering app from javascript/jquery to ember. The old app’s “controls” were: search filters, pagination, sorting and page size…all managed with query string parameters.

From what I can tell, the way to do this with ember is also with query string parameters (using queryParams). If that’s a wrong assumption and there’s a better way, let me know.

So under that assumption I started tinkering and have a working prototype, but I’m having trouble with the management of the params. The old app had a “ruleset” in place to manage params. For example:

if pagination is active and a fliter is added, reset pagination

if new “sort” is chosen, reset pagination, but leave all filters

if “clear filters” is clicked, remove pagination and filters but leave sort and page size

There are several rules like this that governed what params should and shouldn’t be on the url after any given action. because of the complexity of the rules, the old app re-built the url after each action to be sure it was always in sync.

But with ember, the query params are sticky. That’s a nice feature, but I can’t figure out a way to apply my query parameter ruleset. I started down the path of manually parsing the query params from the url and building a “ruleset” function that outputs a query string, but I think that’s committing the newb mistake of re-creating what I did with jquery, but with ember.

I know I’m not the first to build a search filter/sort/pagination app with ember. Can anyone give me guidance on how best to set this up? Maybe I’m looking at it wrong or thinking about it wrong?

Resetting query params for link-to/transitionTo

I don’t know it it is the best way but you can take a look at my Bloggr Example on => Source