Hi I am trying to dynamically change a text depending on a boolean. Im using Aurelia with i18n, one solution would be to just have a method that returns what you want. But I would like to have it in the html, because I think its clearer to see which text the button will have depending on the bool in the html code. This is what it looks like now:
<button>${account.changed ? '_cancel' | t : '_close' | t } </button>
This is what I have tried:
<button>${account.changed ? ('_cancel' | t) : ('_close' | t) } </button>
<button>${account.changed ? ${'_cancel' | t} : ${'_close' | t} } </button>
Any of my tries ends with a crash:
Error: Parser Error: Conditional expression account.changed ? '_cancel' requires all 3 expressions at column 33 in [account.changed ? '_cancel' | t : '_close' | t ]
I have only used i18N like this to this point:
<div>${'example | t'}</div>
Never needed to change the text depending on a condition before.
To anyone that comes here, I solved this doing this:
innerHTML.bind="!account.changed ? close : cancel"
and in the .js
this.close = this.i18n.tr('_close');
this.cancel = this.i18n.tr('_cancel');
I do think it should be possible in some way to achive this directly in HTML with aurelia
This is what I'm using:
<span t="_cancel" if.bind="account.changed"></span><span t="_close" if.bind="!account.changed"></span>
I was stuck on this for a while and this is the best way I found to do it.