Can I force 'active' class on a {{link-to}} helper?

问题

Here is possibly an edge case for how ember adds the 'active' class on a link to helper.

I have my current router set up like so:

import Ember from 'ember';
var Router = Ember.Router.extend({
  location: PortalDevENV.locationType
});

Router.map(function() {
    this.resource('portal', function() {
        this.route('admin');
        this.resource('placements', function() {
            this.route('import-debtors');
            this.resource('add-debtor', function() {
                this.route('debtor-form');
            });
            this.route('view-debtors');
        });
        this.resource('debtor', {path: 'placements/view-debtors/debtor/:debtor_id'}, function() {
            this.route('agent-notes');
            this.route('transactions');
        });
    });
});

export default Router;

notice how I have a resource called "debtor" that- while it is being rendering into the portal template- i still need it to appear (in terms of the URL) to be a child of the "view-debtors" route... which, in reality, is nested deeper within a separate set of templates.

This structure seems to be working fine, but it is breaking my breadcrumb-style navigation.

When moving into the "debtor" page.. i still want "view-debtors" {{link-to}} helper to get the 'active' class from ember... along with the {{link-to}}'s that lead up to the "view-debtors".

Is this possible to do by calling some functions in my routes... or some other way?

It doesn't seem to be a common ember convention... but then again perhaps Ember actually does work in this way and I did something else that broke it? Take a look and see if my set up is correct.

回答1:

You should be able to bind the active class to a computed property. Assuming the {{link-to}} you are referring to is in your application.hbs template, you could do something like this:

// templates/applictaion.hbs
{{#link-to "view-debtors" class="isDebtorsRoute:active"}}View Debtors{{/link-to}}


// controllers/application.js
export default Ember.Controller.extend({
  isDebtorsRoute: function() {
    // use this.get('currentRouteName') or this.get('currentPath')
  }.property('currentPath')
})

EDIT: Here is a jsbin example http://emberjs.jsbin.com/wuhor/1/edit?html,css,js,output

来源：https://stackoverflow.com/questions/25042737/can-i-force-active-class-on-a-link-to-helper

标签

ember.js

ember-cli