Shortcode quotes vs plain string

I am trying to understand the difference between the two behaviors.

My code:

{{ $func := $page.params.title}}
<div class="class" onclick={{ $page.params.title }}()>
<h2>{{ $page.params.title }}</h2>
</div>

Issue:
{{ $func := $page.params.title}} returns “Title” while
<h2>{{ $page.params.title }}</h2> returns Title.

Why are there quotes in the first one and none in the second, even though the call looks the same to me?

I tried also {{ $func := $page.params.title | safeJS }} but to no avail.

On a similar note, how to pass a function by its name to onclick? Will passing the string without quotation work?

This will print out two identical h2 tags:

{{ $func := $page.params.title}}
<h2>{{ $func }}</h2>
<h2>{{ $page.params.title }}</h2>

This will also print out two identical onclick attributes, both with extra quotes.

{{ $func := $page.params.title}}
<div class="class" onclick="{{ $func }}()"></div>
<div class="class" onclick="{{ $page.params.title }}()"></div>

By using safeJS like this:

{{ $func := $page.params.title  | safeJS }}
<div class="class" onclick="{{ $func }}()"></div>

or like this:

{{ $func := $page.params.title }}
<div class="class" onclick="{{ $func  | safeJS }}()"></div>

You will get the value without extra quotes.

1 Like