使用Ember Handlebars有条件地为元素添加动作

Question

我已经在网上搜索了这个问题的答案,但没有找到.我有一个自定义的SideNavigationLinkComponent,它包装了<li>一个<a>标签,可能还有一个<ul>子链接.

锚标记看起来像这样:

 <a href="{{unbound menu.parent.link}}" {{action "toggle"}}>
    ...
 </a>

"你为什么不用{{link-to}}？" 你问.这是因为menu.parent.link不能保证是有效的路线; 有时它就像是#nav-collapsible-44,它打破了{{link-to}}.

无论如何,在上面的代码中的锚标记的点是作为任何一个顶级链接到其他网页灰烬或导致子链路的可折叠列表下拉按钮.

我的问题是,只要我{{action "toggle"}}在锚标签上,链接就不会去任何地方(但是可折叠的工作,这是我想要的一部分).所以我需要能够有条件地添加一个,{{action}}以便我可以创建链接到其他页面或按钮,导致下拉列表扩展,具体取决于我有一些布尔条件的值.

我不想这样做:

{{#if condition}}
  <a href="{{unbound menu.parent.link}}" {{action "toggle"}}>
    ...
  </a>
{{else}}
  <a href="{{unbound menu.parent.link}}">
    ...
  </a>
{{/if}}

到目前为止,这是我找到解决这个问题的唯一方法.锚标签中有很多HTML,当然,我可以使用部分来干这个结构,但这只是将香蕉分割上的辅助工具.

我也试过了

if(!condition){
  return true; 
}

在我的"切换"动作但它没有任何效果.

Answer 1

使用关闭操作,例如:

<a href="{{unbound menu.parent.link}}" onclick={{if condition (action 'toggle')}}> 
    ...
</a>

Answer 2

您还可以使用ember-composable-helpers中的（可选）helper

<a {{action (optional (if foo (action "nextQuestion") null))}}>