Mustache

by Bianca Kuehweidner

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script type="text/html" id="ul-template">
    <ul id="list">
        {{> cnt}}
    </ul>
</script>  

<script type="text/html" id="ul-template2">
    <div id="list2" border>
        {{> cnt}}
    </div>
</script>

<script type="text/html" id="par">
    <p><b>{{ name }}</b></p>
</script>

<div id="main">
</div>

CSS

div { 
    border-style: double; 
    border-color: red;
   }

JavaScript

let content = `<p><b>{{ name }}</b></p>`

var view = {"name" : "Jack"}, 

		li = $('#par').html(),
		partials1 = {"cnt": li},
    partials2 = {"cnt": content}

		ul1 = Mustache.render($('#ul-template').html(), view, partials1),
    ul2 = Mustache.render($('#ul-template2').html(), view, partials2);

document.getElementById('main').innerHTML+= ul1
document.getElementById('main').innerHTML+= ul2