Ember.js active link class with query params

4

votes

In an indexview I have links that set the sorting:

# Template
{{#link-to 'products' (query-params sortBy="title")}}Title{{/link-to}}
{{#link-to 'products' (query-params sortBy="price")}}Price{{/link-to}}

# Controller
queryParams: ['sortBy']
sortBy: 'id'
sortProperties: ( ->
  [@get("sortBy")]
).property("sortBy")

That generates links that always have the class of 'active', but I want to highlight the currently active sort filter. What is the best way to do it?

I tried binding to a computed property like this:

{{#link-to 'products' (query-params sortBy="price") classNameBindings='sortByPrice'}}Price{{/link-to}}

sortByPrice: -> (
  @get('sortBy') == 'price'
).property('sortBy')

That didn't quite work, but even if it did, that's not DRY at all – and eventually I would like to add a lot of different attributes on which to sort.

As I understand, the problem is that ember adds the 'active' class when it's in the context of that controller, which it always is with different query-params.

(Running the latest canary build of Ember as of 14th June)

ember.js

0

votes

This has been fixed in Ember Canary, as of https://github.com/emberjs/ember.js/pull/5109

0

votes

QueryParams should add the "active" class based on whether the declared parameter in the {{#link-to}} helper has the same value as the attribute at that moment, as I can demonstrate in this jsbin.

That said, I'm having the same problem, so I believe there's some fringe case where this doesn't work right, and I'd be happy if you could modify this example to reflect that.

0

votes

I'm facing the same problem now and I have temporary solution.

 <!-- Posts Template -->
        <!-- Categories -->
        <div class="block step visible-desktop visible-tablet">
            <div class="header">
                <h3>Category</h3>
            </div>

            <div class="area categories">
                <ul>
                    {{#each staticCategory in controller.staticCategories}}
                        {{post-category currentCategory=currentCategory staticCategory=staticCategory}}
                    {{/each}}
                </ul>
            </div>
        </div>
        <!-- Categories end -->


   //Posts Controller
   staticCategories: ['Front-End', 'JavaScript', 'jQuery', 'null'],
     currentCategory: function () {
         return this.get('category');
     }.property('category'),
     queryParams: ['category'],
     category: null,
     filteredContent: function () {
         var category = this.get('category');
         var posts = this.get('model');
         return category ? posts.filterBy('category', category) : posts;
     }.property('category', 'model')

    //Post-Category Component template
    {{#link-to 'posts' (query-params category=staticCategory)}}
      {{staticCategory}}
    {{/link-to}}

    //Post-Category Component js
    Blog.PostCategoryComponent = Ember.Component.extend({
       tagName: 'li',
       isActive: function () {
         return this.get('staticCategory') === this.get('currentCategory')
        }.property('currentCategory', 'staticCategory'),
        classNameBindings: ['isActive:active']
    });

0

votes

I've found a solution for this. Ember (currently) seems to make a distinction between linking to a resource and linking to a sub-route, e.g doing {{link-to "resource"}} will always set the active class, but doing {{link-to "resource.index"}} will toggle the active state according to their query params.

Here's a jsbin showcasing the difference: http://emberjs.jsbin.com/zawukucisoni/3/edit

I've opened an issue that can be found here: https://github.com/emberjs/ember.js/issues/5359

Ember.js active link class with query params

4 Answers