How to bind action only under certain condition [Ember.js]

Question

I just want to know, is there some way I can achieve the below purpose.

<button class="{{unless publishable "button-disabled"}}" {{if publishable (action "publish")}}>Publish</button>

Of course, it can be done in action method. I just think it could keep code drier if it can be done in template.

NOTE:

• I know the code above will not work. It's only for purpose illustration.
• I know button can use disabled attribute to achieve this. In my original work, it is actually a <a/> which doesn't have disabled. I need to keep it as <a/> tag for css purpose.
• I wish to keep the button in page no matter it is disabled or not. This is kind of web page convention. In that case, user will know that he must missing something when the button is disabled.

Answer 1

It is possible using {{mut}} in combination with {{action}} helper:

<button {{action (if publishable 'publish' (action (mut undefProp)))}}>Publish</button>

Working demo.

You can read more about this specific use case (mut converts to function) in this blog post.

Explanation:

We use action helper and action which we pass to that helper will be computed - based on if condition.

If condition evaluates to true we return 'publish' which is simply action name.

If condition evaluates to false then we pass action which does nothing - we use something like workaround: (action (mut undefProp)).