最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Conditionally add action to element with Ember Handlebars - Stack Overflow

programmeradmin2浏览0评论

I've scoured the Internet for an answer to this problem but have found none. I have a custom SideNavigationLinkComponent that wraps an <li> around an <a> tag and possibly a <ul> of child links.

The anchor tag looks something like this:

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

"Why aren't you using {{link-to}}?" you ask. It's because menu.parent.link isn't guaranteed to be a valid route; sometimes it's something like #nav-collapsible-44, which breaks {{link-to}}.

Anyway, the point of the anchor tag in the code above is to serve as either a top-level link to another Ember page or a button that causes a collapsible list of sublinks to drop down.

My problem is that as long as I have {{action "toggle"}} on the anchor tag, the link doesn't go anywhere (but the collapsibles work, which is part of what I want). So I need to be able to conditionally add an {{action}} so that I can create either links that go to other pages or buttons that cause dropdowns to expand depending on the value of some boolean condition I have.

I don't want to have to do this:

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

which so far has been the only way I've found to solve this problem. There's a lot of HTML in the anchor tags and sure, I could use a partial to DRY this structure up a bit, but that's just putting band-aids on a banana split.

I've also tried

if(!condition){
  return true; 
}

in my "toggle" action but it had no effect.

I've scoured the Internet for an answer to this problem but have found none. I have a custom SideNavigationLinkComponent that wraps an <li> around an <a> tag and possibly a <ul> of child links.

The anchor tag looks something like this:

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

"Why aren't you using {{link-to}}?" you ask. It's because menu.parent.link isn't guaranteed to be a valid route; sometimes it's something like #nav-collapsible-44, which breaks {{link-to}}.

Anyway, the point of the anchor tag in the code above is to serve as either a top-level link to another Ember page or a button that causes a collapsible list of sublinks to drop down.

My problem is that as long as I have {{action "toggle"}} on the anchor tag, the link doesn't go anywhere (but the collapsibles work, which is part of what I want). So I need to be able to conditionally add an {{action}} so that I can create either links that go to other pages or buttons that cause dropdowns to expand depending on the value of some boolean condition I have.

I don't want to have to do this:

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

which so far has been the only way I've found to solve this problem. There's a lot of HTML in the anchor tags and sure, I could use a partial to DRY this structure up a bit, but that's just putting band-aids on a banana split.

I've also tried

if(!condition){
  return true; 
}

in my "toggle" action but it had no effect.

Share Improve this question asked Jan 15, 2015 at 19:57 IGNISIGNIS 4404 silver badges15 bronze badges 5
  • Why not just pass the menu.parent.link as a parameter to the toggle action and handle the logic for transitioning (or not) there? – rogMaHall Commented Jan 15, 2015 at 20:07
  • I thought of that too, then I saw this answer. I don't think it makes sense to turn my navigation link into a view, either. And since it's nested inside a larger component, routing would get tricky real fast. But I'm open to suggestions! – IGNIS Commented Jan 15, 2015 at 20:28
  • 1 You should definietly do it the way as @rogMaHall pointed out. If you need to create component that is not issolated from context then it should be a view. – Mateusz Nowak Commented Jan 16, 2015 at 21:04
  • Hi @IGNIS, did you find a solution? am also in search of a solution for this kind of problem. Can you share your solution here? – Praveen Kumar Commented Oct 4, 2016 at 12:18
  • I'm sorry @PraveenKumar, but I did not. :( I think I had to resort to the solution I proposed in the question (i.e.,, use the Handlebars conditionals and a bit of copy-pasting). You could also try the solution suggested by the other commenters on here, though as I recall, I had a problem with that as well. Wish I could be more help. Good luck! – IGNIS Commented Oct 4, 2016 at 21:19
Add a comment  | 

2 Answers 2

Reset to default 13

Use closure actions such as:

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

You can also use (optional) helper from ember-composable-helpers

<a {{action (optional (if foo (action "nextQuestion") null))}}>
发布评论

评论列表(0)

  1. 暂无评论