CODEWITHSUNDEEP
ember.js
Diego Acosta
Diego Acosta

Reputation: 1737

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

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!

Upvotes: 1

Views: 860

Answers (2)

mize
mize

Reputation: 61

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.

Upvotes: 6

Alexey Ripenko
Alexey Ripenko

Reputation: 149

Does page variable work properly? Try to use quotes (query-params page='1')...

Upvotes: -1

Related Questions