title: Conditionally add action to element with Ember Handlebars
body: <p>I've scoured the Internet for an answer to this problem but have found none. I have a custom SideNavigationLinkComponent that wraps an <code>&lt;li&gt;</code> around an <code>&lt;a&gt;</code> tag and possibly a <code>&lt;ul&gt;</code> of child links. </p>
  
  <p>The anchor tag looks something like this: </p>
  
  <pre><code> &lt;a href="{{unbound menu.parent.link}}" {{action "toggle"}}&gt;
      ...
   &lt;/a&gt;
  </code></pre>
  
  <p>"Why aren't you using <code>{{link-to}}</code>?" you ask. It's because <code>menu.parent.link</code> isn't guaranteed to be a valid route; sometimes it's something like <code>#nav-collapsible-44</code>, which breaks <code>{{link-to}}</code>. </p>
  
  <p>Anyway, the point of the anchor tag in the code above is to serve as <strong>either</strong> a top-level link to another Ember page <strong>or</strong> a button that causes a collapsible list of sublinks to drop down. </p>
  
  <p>My problem is that as long as I have <code>{{action "toggle"}}</code> on the anchor tag, the <strong>link doesn't go anywhere</strong> (but the collapsibles work, which is part of what I want). So I need to be able to <strong>conditionally add an <code>{{action}}</code></strong> so that I can create either links that go to other pages or buttons that cause dropdowns to expand depending on the value of some boolean condition I have. </p>
  
  <p>I don't want to have to do this:</p>
  
  <pre><code>{{#if condition}}
    &lt;a href="{{unbound menu.parent.link}}" {{action "toggle"}}&gt;
      ...
    &lt;/a&gt;
  {{else}}
    &lt;a href="{{unbound menu.parent.link}}"&gt;
      ...
    &lt;/a&gt;
  {{/if}}
  </code></pre>
  
  <p>which so far has been the only way I've found to solve this problem. There's a lot of HTML in the anchor tags and sure, I could use a partial to DRY this structure up a bit, but that's just putting band-aids on a banana split. </p>
  
  <p>I've also tried </p>
  
  <pre><code>if(!condition){
    return true; 
  }
  </code></pre>
  
  <p>in my "toggle" action but it had no effect. </p>