Inheriting from LinkComponent in Ember is amazing!

LinkComponent is the module backing the famous Ember {{ link-to }} helper. The LinkComponent will automatically add an active class to components that inherit from it as well as override their click handler to direct to a specified route.

Until quite recently in (Ember 2.1) it wasn't really possible to utilize this module without {{ link-to }}.

No longer!

My use case was simple, I wanted to have a {{ link-to tagName="li" }} with some draggable behavior. This proved to be quite difficult. Once I got our app up to 2.1 I decided to use LinkComponent

To do so is quite simple:

// app/components/x-foo.js
export default Ember.LinkComponent.extend({
  tagName: 'li'
  // your handlers here
});

Then you invoke it just as you would with a {{ link-to }}

{{# x-foo 
    pathToRoute
    model 
    myComponentAttribute1='foo' 
}}
{{/ x-foo }}

And that is it. You get for free the active class behavior and your component's click handler will have knowledge of Ember's router to send you to the route you specified at invocation.

I had a great experience pulling this in (got to remove 20 or so LoC), have fun!

Cheers,

Jonathan

Tweet