Programatically disabling Links created by link-to helper

1

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(); )
2

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

http://emberjs.com/api/classes/Ember.LinkView.html#property_disabled

3

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 ??

4

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.

5

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.

1 Like
6

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.

2 Likes
7

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.

8

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}}
     {{post.title}}
 {{/link-to}}
2 Likes
9

A little jsfiddle demonstrating this:

1 Like