Ember link-to ignore query params to bind class `active`

Question

I've a simple application which fetches records for a given period, and support paging the results:

// routes
this.resource('visits', function() {
  this.route('list', { path: '/:period' });
});

// 'visits' template
.menu
  link-to %a.item 'visits.list' 'today' (query-params page=1)
    | Today
  link-to %a.item 'visits.list' 'yesterday' (query-params page=1)
    | Yesterday
  link-to %a.item 'visits.list' 'week' (query-params page=1)
    | Current Week

I wanted every time a period is clicked, it's reset to page 1. The problem is that by doing so when I go to any other page different than 1, the current period in the link-to is no longer active.

e.g: http://localhost:4200/visits/today?page=5

I tried to solve this resetting the params, or adding defaults to the controller as described here:

However neither of both solutions are working for me, since I'm not exiting the controller. Is any way to make link-to to ignore an specific query-param and stay active?

Update:

Here's a JSBin with this issue: http://emberjs.jsbin.com/mulonulefi/4/edit

Thanks!

Simulate in jsbin and give the link or improve your question somehow in detail — Susai
@Susai Thanks, I've updated the question with a JSBin example. — Diego Acosta

mize mize · Accepted Answer · 2015-01-20T14:06:50

You can override which route will make the {{link-to}} active by setting the current-when attribute:

<ul>
  <li>{{#link-to 'visits.list' 'all' (query-params page=1) current-when="visits.list"}}All{{/link-to}}</li>
  <li>{{#link-to 'visits.list' 'today' (query-params page=1) current-when="visits.list"}}Today{{/link-to}}</li>
</ul>

I updated a version of your JSBin here, and I created a JSBin with references.

Ember link-to ignore query params to bind class `active`

2 Answers