0

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.

Liam
  • 27,717
  • 28
  • 128
  • 190
Grapho
  • 1,654
  • 15
  • 33

1 Answers1

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

Amiel Martin
  • 4,636
  • 1
  • 29
  • 28
  • sorry no, i did not get this to work... i am confused, is currentPath a global property provided by ember on a route transition? how does the computed property know when to trigger? Currently it is not triggering at all. – Grapho Sep 04 '14 at 18:10
  • @Grapho: `currentPath` is a property set on the controller. The computed property is triggered when the dependent property (`currentPath`) changes. Maybe this live example will help: http://emberjs.jsbin.com/wuhor/1/edit?html,css,js,output – Amiel Martin Sep 04 '14 at 20:48
  • Also see this section in the guides: http://emberjs.com/guides/understanding-ember/debugging/#toc_get-current-route-name-path – Amiel Martin Sep 04 '14 at 20:51
  • i have a suspicion that this method does not work on a dynamic segment route? i have tried every combination and they all seem to work, until i try to do it on this particular route, which has a dynamic segment :( i'll double check if i have any typos or syntax errors. – Grapho Sep 05 '14 at 14:21