Don't perform action when button is disabled - Ember.js

Question

I had the following action in my html:

<a href="#" class="list-group-item" disabled {{action addVisibilityService target="view"}}>
   element
</a>

and I have the function to handle this action:

addVisibilityService : function(element){
    console.log("I've been called");
},

but the problem is that this action is called when is disabled. So I was wondering how to avoid that?

Thanks

This wont work. You may need to use a button instead of an anchor. Here more information https://github.com/emberjs/ember.js/pull/2240 — blessanm86, Aug 12 '14 at 09:37

score 1 · Accepted Answer · edited May 23 '17 at 10:26

It seems that HTML links cannot be disabled portably (eg How to disable HTML links also plenty other posts). What you can do is use the {{if}} helper and present it as simple text based on a certain state.

http://emberjs.jsbin.com/sefabibayile/1/edit

hbs

<script type="text/x-handlebars" data-template-name="index">
    <i>if value less than 3 characters link disabled</i>
    {{input value=someProp}}
    <br/>
    {{#if somePropOk}}
    <a href="#" class="list-group-item" {{action addVisibilityService target="view"}}>
   element
</a>
{{else}}
<span style="font-style:italic;color:grey">element</span>
{{/if}}


  </script>

js

App.IndexController = Em.Controller.extend({
   someProp:"test",
  somePropOk:function(){return this.get("someProp").length>3;}.property("someProp")
});

Don't perform action when button is disabled - Ember.js

1 Answers1