https://medium.com/@trukrs/tagged-template-literal-for-html-templates-4820cf5538f9
Basic Usage
Template:
// 1. define some data const name = 'John Doe'; // 2. define a "named template" and pass in and use your data variable const nameTemplate = ( name ) => template`<p>${ name }</p>`; // 3. render your template with the data and store the result for future use const templateOutput = render( name, nameTemplate ); // 4. use your template document.getElementById( 'simpleRenderedOutput' ).innerHTML = templateOutput;
Advanced Usage
Template:
// 1. define some data const aPeople = [ {firstName: 'Joe', lastName: 'Smith'}, {firstName: '<b>Bold is unsafe</b>',lastName: 'Vanderbilt'}, {firstName: 'Sam', lastName: 'Anderson'} ]; // 2. define a "named template" (peopleTemplate) and pass in and use your data variable (person) // It's just javascript, so you can call other/regular javascript functions ( like sanitize() ) const peopleTemplate = ( person ) => template` <li> ${ sanitize( person.firstName ) } ${ person.lastName } </li>`; // 4. render and insert your template in one step with handy helper functions the last two parameters identify the target object and where relative to that object you want to insert your data (default is replace) insertTemplate( aPeople, peopleTemplate, '#arrayRenderedOutput', 'prefix' );
Simple Template
Template:
Data:
Output Source:
Rendered Output:
Array Template
Template:
Data:
Output Source:
Rendered Output:
Object Template
Template:
Data:
Output Source:
Rendered Output:
Recursive Template
Template:
Data:
Output Source:
Rendered Output:
Escapte Unsafe HTML Characters
Orginal unsafe chars:
HTML Entity Encodings (safe chars) :
Rendered Output: