有条件地使用余烬车把向元素添加动作

Conditionally add action to element with Ember Handlebars

本文关键字:元素 添加 余烬车 有条件      更新时间:2023-09-26

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

锚标记如下所示:

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

"你为什么不使用{{link-to}}?"你问。这是因为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; 
}

在我的"切换"动作中,但它没有效果。

使用闭包操作,例如:

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

您还可以使用来自 ember 可组合助手的(可选)帮助程序

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