How can I render a block only if a specific route is active?

ember.js

Solution

After investigating the ember code for the linkTo and if helpers, the answer from intuitivepixel and a blog post about writing my own bound block helper, I've found a solution:

var resolveParams = Ember.Router.resolveParams;

var resolvedPaths = function(options) {
    var types = options.options.types.slice(1),
    data = options.options.data;

    return resolveParams(options.context, options.params, { types: types, data: data });
};

Ember.Handlebars.registerHelper('ifRoute', function(name) {
    var options = [].slice.call(arguments, -1)[0];
    var params = [].slice.call(arguments, 1, -1);
    var theResolvedPaths = resolvedPaths({ context: this, options: options, params: params });
    var router = options.data.keywords.controller.container.lookup('router:main');

    var self = this;
    var evaluateIsCurrentRoute = function() {
        self.set('current_route_is_active_bool_for_ifroute', (function() {
            return router.isActive.apply(router, [name].concat(theResolvedPaths)) ||
                router.isActive.apply(router, [(name + '.index')].concat(theResolvedPaths));
        })());
    };

    evaluateIsCurrentRoute();
    router.addObserver('url', evaluateIsCurrentRoute);

    options.contexts = null;

    return Ember.Handlebars.helpers.boundIf.call(this, 'current_route_is_active_bool_for_ifroute', options);
});

Problem

I wanna render a block in Ember Handlebars only, if a specific route is active. So, how can I create a 'ifRoute' helper, with the same conditons then the 'active' class on the 'linkTo' helper? I want this, because I've a two layer navigation. So, I want to show the sub-navigation only, if the head navigation point is active. I dont wanna use the 'active' class, because I use lazy loading and I only want to load the sub navigation when the head navigation point is active. So, what I want to do is: ``` <ul> {{#each assortmentGroups}} <li> {{#linkTo "assortmentGroup" this}} {{description}} {{/linkTo}} {{#ifRoute "assortmentGroup" this}} <ul> {{#each itemCategories}} <li>{{#linkTo "itemCategory" this}} {{description}} {{/linkTo}}</li> {{/each}} </ul> {{/ifRoute}} </li> {{/each}} <ul> ``` How can I do this or is there a better solution? Thanks

Original source