Aggiungere un'azione all'elemento con manubri Ember

Question

Ho setacciato Internet per una risposta a questo problema ma non ne ho trovato. Dispongo di un SideNavigationLinkComponent personalizzato che include uno <li> attorno a un tag <a> e probabilmente uno <ul> di collegamenti figlio.

Il tag di ancoraggio simile a questa: "Perché non stai usando {{link-to}}"

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

tu chiedi. È perché menu.parent.link non è garantito per essere un percorso valido; a volte è qualcosa come #nav-collapsible-44, che si rompe {{link-to}}.

Comunque, il punto del tag di ancoraggio nel codice di cui sopra è di servire come sia un collegamento di primo livello per un'altra pagina Ember o un pulsante che provoca un elenco comprimibile di sublinks a cadere verso il basso.

Il mio problema è che, fintanto che ho {{action "toggle"}} sul tag di ancoraggio, il collegamento non andare da nessuna parte (ma i collapsibles lavoro, che è parte di quello che voglio). Quindi devo essere in grado di aggiungere in modo condizionale allo {{action}} in modo che sia possibile creare i collegamenti che passano ad altre pagine o pulsanti che causano l'espansione dei menu a discesa in base al valore di alcune condizioni booleane che ho.

Io non voglio avere a che fare questo:

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

che finora è stato l'unico modo che ho trovato per risolvere questo problema. C'è un sacco di HTML nei tag di ancoraggio e sicuramente, potrei usare un parziale per ASCIUGARE questa struttura un po ', ma questo è solo mettere i cerotti su una banana split.

Ho anche provato

if(!condition){ 
    return true; 
} 

nella mia azione "toggle", ma non ha avuto alcun effetto.

Answer 1

Usa closure actions come ad esempio:

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

Answer 2

È inoltre possibile utilizzare (optional) helper from ember-composable-helpers

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