Skip to content

Instantly share code, notes, and snippets.

@claytongulick

claytongulick/template.js

Last active December 29, 2024 12:41
Show Gist options
  • Save claytongulick/bf05ecebe7a2bbb96b585b74af203eed to your computer and use it in GitHub Desktop.
Save claytongulick/bf05ecebe7a2bbb96b585b74af203eed to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. claytongulick revised this gist Nov 29, 2019. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion template.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@
    //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.
    template = (data) => html` //data param is passed in via render(template(data), this) - if not using lit-html, could be any function
    //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">
    ${
  2. claytongulick revised this gist Nov 29, 2019. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions template.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,11 @@
    //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.
    template = (data) => html`
    template = (data) => html` //data param is passed in via render(template(data), this) - if not using lit-html, could be any function
    <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 => { //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
  3. claytongulick revised this gist Nov 29, 2019. No changes.
  4. claytongulick created this gist Feb 23, 2018.
    17 changes: 17 additions & 0 deletions template.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    //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.
    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 => {
    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>
    `;