Ember.js: {{#linkTo}} has a hardcoded CSS class 'active'

[zubairov]

I just discovered hidden 'feature' that LinkView used by {{#linkTo}} Handlebar helpers add a CSS class _active_ to the HTML 'a' element when given Route linked to is 'active'

https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/helpers/link_to.js#L46

Questions:

• How can a Route be active? Can not find anything about it in Ember Guides.
• Can I remove this 'feature'? It is very annoying that Ember decides to use such simple (and in my case frequently used) CSS class name for the functionality that is neither documented nor obvious.
• If I understand it correctly LinkView is not even a public class (that I could reopen and fix) but a hidden private construct. Is there a specific reason for that?

As solutions to this problem I would suggest to remove this 'active' feature from the LinkView and make sure people who need it could add it by extending/reopening LinkView.

[eriktrom]

Changing this would break the PeepCode Ember.js integration test that was mentioned at ember camp...

https://www.youtube.com/watch?feature=player_detailpage&v=RYAD2arvysU#t=341s

[zubairov]

Thanks for your comment @etrom , answer to your question is here:

https://www.youtube.com/watch?feature=player_detailpage&v=RYAD2arvysU#t=385s

Seriously speaking Ember.JS as a general application framework may not impose CSS classes to be used (or not used) in application.

[eriktrom]

Haha, I get it "did we just break a publicly document API" -- so i guess its not in the api, but it is in the guides

http://emberjs.com/guides/routing/defining-your-routes/

In all seriousness, I think the cost vs benefits should be weighed -- should ember be 'right' or 'effective' -- and if the answer is effective, then what should it be effective at -- one could argue that, right now(disregarding ember-data), it should be effective at getting new users onboard quickly and without frustration... I do see your point, don't get me wrong... I'm just thinking about the pain a new user watching the peepcode screencast might encounter when the active table doesn't turn black as it does in the screencast -- which is like the first cool thing you see happen -- automagically -- while watching the peepcode screencast...

I could argue your side though, you do make a good point -- although it seems less important right now than new people loving the experience of getting up and running...

[zubairov]

Got your point. Peep screencast is important. I see on Youtube it has ~1000 views. I could assume 10% of people ~100 devs. would try to reproduce it (I'am not one of them because I never saw this video before).

My problem is that we happen to be using Ember.JS to develop larger aka. 'ambitious' Ember.JS application, and we expect Ember to be careful about our markup and our styles. I can not understand why there are hardcoded values that surprisingly appear in our markup, so we have to do something like this:

https://github.com/elasticio/ember.js/commit/20084497c3f90898b574cee9868896fca50b76c7

I really don't want to move this discussion into the 'right' or 'effective' area. IMHO doing hardcode style names that can only be changed by patching the source is just not professional. And it's 2x not professional to see such thing in _A framework for creating ambitious web applications_.

[ulisesrmzroche]

@zubairov, a route is marked as active when you enter it. Also, I believe #linkTo is just a helper, so can't you over-ride that or make your own link-view/extend it? The .active css class is abstract enough to be a global and comes in really useful. I'd probably just removeClass with jQuery where I don't want it in the view or be more specific with selector-use.

[zubairov]

@ulisesrmzroche thanks for your comment. I don't see your point, sorry. Hacking attributes with JQuery sucks. Sorry.

[ulisesrmzroche]

@zubairov, over-riding the helper doesn't work either?

[zubairov]

@ulisesrmzroche right, see link to the source code in my first comment. LinkView is _private class_ can't reopen it :(

[ulisesrmzroche]

https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/helpers/link_to.js#L116

I don't think the linkTo helper is though. That's what instantiates the whole view. Seems like you could put your own view class there and configure stuff there. I feel that linkTo active is a convention.

[bradleypriest]

You can customize the active class on a link-by-link basis (even to no class) using {{#linkTo activeClass=""}}.

[rlivsey]

@bradleypriest it would be good to be able to override it app-wide, "active" is ok in my app but I'd prefer it was "is-active" to fit in with the naming convention of the rest of my CSS.

2315 would be very handy in this regard

[seanabrahams]

Namespace it like ember already does with the 'ember-view' class and make it 'ember-active' or 'ember-linkto-active'.

[rlivsey]

@seanabrahams I doubt the default will change this close to 1.0 as it would break the PeepCode integration test amongst other things.

[zubairov]

I'm very surprised to see (again) PeepCode as a motivation on how Ember.JS should work. Just realised one should pay ~12 USD to get access to ember.js PeepCode tutorial.
I know open source monetization models are usually indirect (selling books, consulting, etc.) and people creating and maintaining the open source product have families too, but I'm just wondering wherever PeepCode have some (indirect) incentives that causes so much of the issues with fixing obviously 'raw' feature.

[rlivsey]

@zubairov it's more that over the past year so many blog posts, tutorials and videos have become quickly out of date by changes in Ember and that its very frustrating for those trying to learn the framework.

Ember core decided that the PeepCode video was a line drawn in the sand. Unless it's absolutely necessary, all tutorials after that point will remain correct for and after v1, to the extent that an integration test has been made around the code from the video.

Anyone reading and writing articles and blog posts etc... from then on up until Ember v2 can be confident that they won't have the rug pulled out from under them.

[zubairov]

@rlivsey Thanks for quick reply. It's important for me personally and for my company where we use and 'committed' to ember.js to know how decisions are made in 'ember core'. Clear governance rules and transparency in decision making is very important for every open source project.

[stefanpenner]

LinkView is now public.

[zubairov]

Awesome. Thanks for making it public. I'm still convinced that with all respect to Ember.JS ;) it has no right to use CSS classes with obvious names. I hope this issue and associated discussion will raise awareness.

[vonvick]

This might seem like an old post but I think to override the {{#link-to}}{{/link-to}} active class, you might need to reopen the LinkComponent in your app initializers folder for ember 2.x.x like so:

import LinkComponent from '@ember/routing/link-component';

export function initialize(/* application */) {
  LinkComponent.reopen({
    activeClass: ''
  });
}

export default {
  name: 'attributes',
  initialize
};

Or you could leave it empty and define the style in your CSS file instead and adding it using the class attribute in the helper.
I could shed more light if you are having issues with it.