javascript - 使用 Ember Handlebars 有条件地向元素添加 Action

Question

我在互联网上搜索过这个问题的答案，但没有找到。我有一个自定义的 SideNavigationLinkComponent，它包装了一个 <li>围绕 <a>标签和可能的 <ul>子链接。

anchor 标签看起来像这样:

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

“你为什么不使用 {{link-to}} ？”你问。这是因为menu.parent.link不保证是一条有效的路线；有时它类似于 #nav-collapsible-44 , 这打破了 {{link-to}} .

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

我的问题是只要我有{{action "toggle"}}在 anchor 标记上，链接不会去任何地方(但可折叠的工作，这是我想要的一部分)。所以我需要能够有条件地添加 {{action}} 这样我就可以创建转到其他页面的链接或导致下拉菜单扩展的按钮，具体取决于我拥有的某些 bool 条件的值。

我不想这样做:

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

到目前为止，这是我找到的解决此问题的唯一方法。 anchor 标记中有很多 HTML，当然，我可以使用部分来 DRY 这个结构，但这只是把创可贴放在香蕉片上。

我也试过

if(!condition){
  return true; 
}

在我的“切换” Action 中，但没有效果。

Answer 1

使用closure actions比如:

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