CODEWITHSUNDEEP
templatesember.jshandlebars.js
Johnny Oshika
Johnny Oshika

Reputation: 57602

Ember.js: assign active class to element that matches the current route

Using Ember, I'd like to render a non-clickable set of breadcrumb elements. For example, I'd like to show the user which step they're on as part of a 3 step process. Something like this:

Step 1 | Step 2 | Step 3

I'd like the currently active step to have an active class on it. I can accomplish this by doing something like this:

{{#link-to "step1" tagName="div"}}Step 1{{/link-to}}

The problem with this approach though, is that Step 1 becomes clickable (i.e. clicking on it causes a transition to route) and I don't want it to be clickable. Any way to achieve this using Ember's built-in mechanisms?

Upvotes: 1

Views: 134

Answers (1)

licancabur
licancabur

Reputation: 645

I know you are asking about Ember mechanism, but I don't see a point to do this in javascript, if you can do this so easy in css:

.step.active {
  pointer-events: none;
  cursor: default;
}

Upvotes: 2

Related Questions