Question

我已经在网上搜索了这个问题的答案，但没有找到。我有一个自定义的SideNavigationLinkComponent，它围绕<li>标记和<a>个子链接包裹<ul>。

锚标记看起来像这样：

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

＆＃34;为什么不使用{{link-to}}？＆＃34;你问。这是因为menu.parent.link不能保证是有效路线;有时像#nav-collapsible-44那样会打破{{link-to}}。

无论如何，上面代码中锚标记的点是用作到另一个Ember页面的顶级链接或一个导致折叠的按钮要下拉的子链接列表。

我的问题是，只要我在锚标记上有{{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; 
}

在我的＆＃34;切换＆＃34;行动，但没有效果。

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 Handlebars有条件地为元素添加动作

2 个答案: