Skip to content

Instantly share code, notes, and snippets.

@AbreuY
Forked from claytongulick/template.js
Created March 10, 2022 23:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AbreuY/4e00adb343abe3902c7ab8697be5c59f to your computer and use it in GitHub Desktop.
Save AbreuY/4e00adb343abe3902c7ab8697be5c59f to your computer and use it in GitHub Desktop.
if statement inside string template literals and lit-html.
//a quick example of how to use actual 'if' statements inside template literals,
//without using ternary operator. Sometimes this is cleaner if you have complex conditionals or nested conditionals.
//data param is passed in via render(template(data), this) - if not using lit-html, could be any function
template = (data) => html`
<div id="job_edit" class="modal">
<div class="modal-content">
${
//we're just going to wrap an anonymous inline function here and then call it with some data
(job => { //job here, is just an example, it could be anything, it's passed in below in (data.job)
if(job)
return html`<h4>Edit Job</h4>`
else
return html`<h4>Create Job</h4>`
})(data.job) //call the anonymous inline with the data we care about
}
</div>
</div>
`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment