Programatically disabling Links created by link-to helper


How can i disable links created by link-to helper programatically. I am trying to load a set of results in a list type view and want to disable links in each list item when more items are loading. Things I have already tried

  1. Overiding the click event on the containing view.
  2. Overiding click event on each ‘a’ tag … $('a').click((e)-> e.preventDefault(); )


I think you could set the disabled property on the LinkView itself.


the problem is that would work through bindings and having more number of links i would be propagating the same effect to each of the link through bindings which would be a costly operation.

Something that disables click on the entire view would be more helpful so that the click event doesn’t propagate to the links. Something like $('a').bind('click',(e)-> e.preventDefault()) … but this doesn’t seem to work.

One more interesting thing I observed was that links created by the link-to helper trigger transitions even when the default behaviour of click event on them is prevented. Why does this happen ??


Ok, sorry. Didn’t know you’d already tried that and found it too slow.

Though, in my defense your question was, “How do I do it?” Not, “How do I do it performantly?” :wink:

You can make the link-to helper use any tagName. Maybe you could make the whole ‘li’ a link and still use the binding?

I’m not an expert in Ember, but I have heard it said frequently by those who are that if you seem to be fighting the framework you should rethink your design or approach to be more Ember-friendly. I hope someone with more chops than me can answer your query.


I had a similar issue. I wanted to disable all forms of interaction with the page while I was showing a left hand nav menu that would slide in and out for a mobile app.

I ended up putting a transparent div behind the page and would then give it the highest z-index on the page when I didn’t want the user to be able to click the links. Once a nav option had been selected, this div would be given the lowest z-index on the page again.


I too needed to disable link-to helpers, and ended up aborting transitions in the willTransition action of the route. I let specific transitions go through by checking their targetName.


Heya, managed to solve it like this:

$('a').click(function () {return false;});

in didInsertElement on the view (almost the same as your second suggestion).

Hope this helps anyone.


You can also do it in your template using the disabledproperty of the link-to helper (which wraps the Ember.LinkView). Example:

 {{#link-to "post" deletedPost disabled=deletedPost.isDeleted}}


A little jsfiddle demonstrating this: