JSFiddle - React, Tailwind, and code Playground

by Tim Verwaal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script id="template" type="text/template7">
    <p>Hello, my name is {{firstName}} {{lastName}}</p>
</script>

<div id="testdiv1">
</div>

<div id="testdiv2">
</div>

JavaScript

var myApp = new Framework7({ 
});
var $$ = Dom7;

var template1 = $$('#template').html();
var template2 = '<p>Hello, my name is still {{firstName}} {{lastName}}</p>'
 
// compile it with Template7
var compiledTemplate1 = Template7.compile(template1);
var compiledTemplate2 = Template7.compile(template2);
 
// Now we may render our compiled template by passing required context
var context = {
    firstName: 'John',
    lastName: 'Doe'
};
var html1 = compiledTemplate1(context);
var html2 = compiledTemplate2(context);

$$('#testdiv1').html(html1);
$$('#testdiv2').html(html2);