Skip to content

Helper to add css class based on active route  #4387

Description

@manuelmitasch

Issue

As discussed in #1822, #1849, and lately in manuelmitasch/ghost-admin-ember-demo@fba3ab0#commitcomment-5396470 there is currently no clean way to have an active css class (depending on active route) on a tag other than a link-to helper. This markup is used by bootstrap for example.

Desired output:

<li class="active>
  <a href="post">...</a>
</li>

Current Workaround

{{#link-to 'post' this tagName="li"}}
  {{#link-to 'post' this class="permalink" title="Edit this post"}}
    ...
  {{/link-to}}
{{/link-to}}

This double nesting is ugly.

Proposal

We should add an active-route helper, that adds an active class to the enclosing tag. The existing active route detection functionality of the Ember.LinkView should be moved into a mixin that can be reused for an Ember.ActiveRouteView.

Proposed usage

<li {{active-route 'post' this}}>
  {{#link-to 'post' this}}
    ...  
  {{/link-to}}
</li>

Other fancy usage

<body {{active-route view.classNames}}>

Sometimes, designers put classes on body to distinguish between styles for different templates. When the first parameter is no string (no route) it could lookup/add css classes from the handed property (eg. a views classNames property).

If you guys are happy with this proposal, I can try to implement a first draft.

PING @trek @stefanpenner

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions