有条件地向带有 Ember 把手的元素添加动作

Question

我在 Internet 上搜索了此问题的答案，但找到了 none。我有一个自定义的 SideNavigationLinkComponent，它将 <li> 包裹在 <a> 标签周围，可能还有子 link 的 <ul>。

锚标签看起来像这样：

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

"Why aren't you using {{link-to}}?"你问。这是因为 menu.parent.link 不能保证是一条有效的路线；有时它类似于 #nav-collapsible-44，它打破了 {{link-to}}。

无论如何，上面代码中锚标记的要点是作为或者到另一个Ember页面的顶级link 或一个按钮，可以使子 link 的可折叠列表下拉。

我的问题是，只要我在锚标签上有 {{action "toggle"}}，link 就不会去任何地方（但可折叠的工作，这是我想要的一部分）。所以我需要能够 有条件地添加一个 {{action}} 以便我可以创建转到其他页面的 link 或导致下拉菜单扩展的按钮关于我拥有的一些布尔条件的值。

我不想这样做：

{{#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; 
}

在我的 "toggle" 操作中，但没有效果。

Answer 1

使用closure actions如：

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

Answer 2

您也可以使用 (optional) helper from ember-composable-helpers

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

有条件地向带有 Ember 把手的元素添加动作

Conditionally add action to element with Ember Handlebars

javascript

handlebars.js

ember.js