Elegant way to display HTML attributes with Antlers only when a variable is set ?

[potsky]

Hello !

I am new to Antlers and I am trying to find a way to avoid this:

<a href="{{ url }}" {{ if target }} target="{{ $target }}" {{ /if }}>

I have seen the void keyword in the Antlers documentation but it seems to be only available for tags:

{{ svg src="hamburger" class="{wide ? 'w-full' : void}" }} 

Any advice?

[jackmcdade]

Since the default value for the target attribute is _self, you could do:

<a href="{{ url }}" target="{{ $target || '_self' }}">

[potsky]

Thanx @jackmcdade!

Sure but there is no way to disable the output of target=... if there is no target ?
Our current need is :

<a href="{{ url }}"
    {{ unless target | is_empty }} target="{{ $target }}" {{ /unless }}
    {{ unless rel | is_empty }} rel="{{ $rel }}" {{ /unless }}
    {{ unless icon | is_empty }} class="{{ "icon-" + $icon }}" {{ /unless }}
>

but if there is no way, this is not a problem. We were just asking because we were quite sure would be possible, Antlers seems so nice and more powerful than blade.

[jackmcdade]

There's no way to programmatically alter the <a> element from inside an attribute because you're simply doing server-side string manipulation. Antlers doesn't dynamically alter the DOM like JavaScript. You could write a custom anchor tag or something and then use void that way, or you can just use null coalescence like this to avoid having to write if/unless statements if you'd prefer.

<a href="{{ url }}" target="{{ $target || '_self' }}" rel="{{ $rel }} class="{{ $icon ?= "icon-" + $icon }}">

You may end up with an empty rel or class, but that's still valid and functional HTML.

[potsky]

Thanx @jackmcdade 👍