Disable a link-to for an action inside it

Learning Team
1

ember-cli: 2.14.2 node: 7.10.1

Hi there,

I have a component linked to an action inside a link-to.

The action of the component is to set a class of bouton to active when the user click on it.

Here a simple example of the code:

     //template
      {{#link-to "article-evenements" (query-params article=elem.nid)}}
            <img src="{{elem.image_vedette_mobile_portrait}}" alt="{{elem.title}}"/>
              {{compte-favori-bouton}}
      {{/link-to}}

    // component
   <div class="bouton-favori" {{action "selectionner"}}></div>`

The div bouton-favori look like a heart (see image)hart and is over the image. But when a user click on the heart, the heart has to change colour and the action is registered for later use. I don’t want the link to be active when a user clicks the heart.

I tried to set bubbles=false on the link-to or use a property as described here to no avail: Ember.Templates.helpers - 2.14 - Ember API Documentation

I’m not sure how to handle the situation.

TIA

2

Perhaps set disabled=true on the link-to helper? See:

https://www.emberjs.com/api/ember/2.14/classes/Ember.Templates.helpers/methods/link-to?anchor=link-to

3

Hello broerse, thanks for your reply.

I can’t use disabled=true because I want the link to stay active but disabled only when the user click the heart.

4

You can set disabled={{disabledFlag}} and set disabledFlag from false to true in the compte-favori-bouton component.

5

Hello broerse, thanks again for your reply.

I tried your solution but it’s not working. If you have time, can you please provide a code example.

TIA

6

Ahh, maybe it’s because my link-to is at the root of the template and not the component. I’ll try that later.

7

Let me know if you still need a code example. Maybe I have some time today. You can add a setDisabledFlag=setDisabledFlag action to your component and call that action from your component.

See how createPost calls createAction in ember-cli-blog/blog-posts.js at master · broerse/ember-cli-blog · GitHub from ember-cli-blog/posts.hbs at master · broerse/ember-cli-blog · GitHub

createPost is the real action on the router in my case but in your case I would set the disabledFlag on the controller.

8

Thanks, but I’m not using a controller and never had. I’m a newbie Ember programmer.

9

This sounds like a place where you are trying to use a link-to for something other than it’s purpose. Are you just using it to get an .active class? If so, you may want to just create a ‘heart-meter’ component instead of trying to force these concepts together. You can then transition to the route or whatever from the action etc. I would have to know more about the intention… but that is my first impression.

10

You might find ember-link-action useful.

11

Hello @emanuk. You are really close. You do not need to add bubbles=false to the link-to component, but to the compte-favori-bouton. Or if your component handles the click event, you just need to return false.

Take a look here. I added both examples → Ember Twiddle

PS this works because you do not want you click event to bubble up to the link-to component, thats why you have to stop it before it gets there. Not stop it when it reaches it, which happens when you do {{#link-to ... bubbles=false...