If-else in resources.ExecuteAsTemplate

[loikein]

Hi folks, I have a problem that I know should really be handled with layout files, but I got curious.

Is it possible to use if-else-end (and other conditions) when doing resources.ExecuteAsTemplate? It seems that every example out in the wild use this function only for fetching variables, but I would like to, for example, define two different versions of JS functions, based on the value of an article param. Is this possible?

Thanks a lot!

[razon]

You should assign different TARGET_PATHs (the second argument) for each param values. Similarly, if you’re using js.Build or toCSS, you should speficy different targetPath, then the page will load the corresponding JS/CSS file. BUT I don’t recommend doing that, I use this for separating the RTL and LTR styles only.

There should be much more simple way to do that, but I couldn’t provide help without knowing what extract you want to implement.

For example, you can generate some specified HTML block, then JS can access the page specified parameters and process, then you don’t have to hard code the params into the JS for each pages.

[loikein]

Thanks a lot for your reply. Sorry I was not clear in the first post.

The idea is like this. For example, in my baseof html foot there is:

{{ $js := resources.Get "js/some_js.js" | resources.ExecuteAsTemplate "js/some_js.js" . | resources.Minify }}

and in js/some_js.js:

{{ if .Params.setting_a }}
(async function () {
  await anotherFunction();
{{ else }}
(function () {
{{ end }}
  // (rest of the function)
}
)();

I just tested it out, but only the async version got implemented, even for pages where setting_a is empty (false). Did I do anything wrong, or is this just not supported?

[razon]

Because the final generated JS file is js/some_js.js, there won’t be different content on the same location.

If your want to dynamic load the JS component/functions, then separate it into single JS, and check and load in template.

// js1.js
await function();

// js2.js
await anotherFunction();

{{ if .Params.setting_a }}
  {{ $js := resources.Get "js/js2.js" | resources.ExecuteAsTemplate "js/js2.js" . | resources.Minify }}
{{ else }}
  {{ $js := resources.Get "js/js1.js" | resources.ExecuteAsTemplate "js/js1.js" . | resources.Minify }}
{{ end }}

Or put them into one JS, and check the HTML and process.

{{ if .Params.setting_a }}
  // generate any custom HTML to tell the JS.
  <meta name="js_func_2" content="">
{{ end }}
{{ $js := resources.Get "js/js.js" | resources.ExecuteAsTemplate "js/js.js" . | resources.Minify }}

// js.js
if (document.querySelector('meta[name="js_func_2"]')) {
  ...
}
else {
  ...
}

[loikein]

That makes perfect sense, thank you. I changed the layout into the following, not touching the js files, and it worked.

{{ if .Params.setting_a }}
{{ $js := resources.Get "js/some_js.js" | resources.ExecuteAsTemplate "js/some_js_a.js" . | resources.Minify }}
<script src="{{ $js.RelPermalink }}"></script>
{{ else }}
{{ $js := resources.Get "js/some_js.js" | resources.ExecuteAsTemplate "js/some_js_b.js" . | resources.Minify }}
<script src="{{ $js.RelPermalink }}"></script>
{{ end }}

I guess this was not worth the time…. But thank you again!