if statement inside string template literals and lit-html.

template.js

//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>
`;

Came across this and needed an example where a calling function was passing in the variable. job is not explained how its declared in the example.

function name(name) {
    let m = `
        <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">title</h4>
                    </div>
                    <div class="modal-body">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-6">
                                        ${
                                            (() => {
                                                if(name == "jeff") {
                                                    return `name does equal jeff`;

                                                } else {
                                                    return `nope`;

                                                }

                                            })()

                                        }

                                    </div>


                                </div>                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    `;

}


name("jeff");

Simplified version:

const template = data => `
    <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 ? `<h4>Edit Job</h4>` : `<h4>Create Job</h4>` )(data.job) //call the anonymous inline with the data we care about
            }
        </div>
    </div>
`;
console.info( template( { job: false } ) );

@franz-josef-kaiser, thanks for the example, but as I mention in the comments:

//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.

The whole point of this gist is to demonstrate how to use an 'if' statement without the ternary operator. This is especially useful if you have a lot of if/else conditions.

@claytongulick I overread that. Anyway, you can still remove the else as you return in the if anyway. Whatever passes the first condition is executed, no matter what. Makes it a bit easier to read and understand when there's no conditional logic wrapped around the command.