Bedingte Aktion Element mit Ember Lenker hinzufügen

Question

Ich habe das Internet nach einer Lösung für dieses Problem durchforstet, aber keine gefunden. Ich habe eine benutzerdefinierte SideNavigationLinkComponent, die ein <li> um ein <a>-Tag und möglicherweise ein <ul> von untergeordneten Links umschließt.

Der Anker-Tag sieht wie folgt aus etwas: "Warum bist du nicht {{link-to}} mit"

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

du fragst. Es ist, weil menu.parent.link nicht garantiert ist, eine gültige Route zu sein; manchmal ist es so etwas wie #nav-collapsible-44, die {{link-to}} bricht.

Wie auch immer, der Punkt des Anker-Tages in dem obigen Code ist als entweder ein Top-Level-Link zu einer anderen Seite Ember oder eine Schaltfläche, die eine zusammenklappbare Liste des sublinks bewirkt, Drop-Down zu dienen.

Mein Problem ist, dass, solange ich {{action "toggle"}} auf dem Anker-Tag habe, der Link nicht überall geht (aber die Collapsibles arbeiten, der Teil von dem, was ich will). Also muss ich in der Lage bedingt hinzufügen {{action}}, so dass ich entweder Links, die zu anderen Seiten oder Schaltflächen gehen, die Dropdown-Felder zu erweitern, abhängig von dem Wert der einige boolesche Bedingung, die ich habe, erstellen kann.

Ich will nicht, dies zu tun haben:

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

, die bisher der einzige Weg war ich gefunden habe, dieses Problem zu lösen. Es gibt eine Menge HTML in den Anchor-Tags und sicher, ich könnte ein Partial verwenden, um diese Struktur ein bisschen zu DRY zu machen, aber das ist nur ein Pflaster für einen Bananensplit.

Ich habe auch versucht,

if(!condition){ 
    return true; 
} 

in meiner "Toggle" Aktion, aber es hatte keine Wirkung.

Answer 1

Verwendung closure actions wie:

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

Answer 2

Sie auch (optional) helper from ember-composable-helpers

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