JSFiddle - React, Tailwind, and code Playground

by mkdgs

HTML

<script src="https://rawgit.com/mkdgs/4p_jstemplate/master/$4p_template.js"></script>
<div id="template">    
    https//github.com/mkdgs/4p_jstemplate/
    <br/>
    <h1>Html Template part</h1>
    <h2>Short syntaxe</h2>
    
    short print: <b>{{=data.bar }}</b> <br/>
    traverse data tree safely with is(): <b>{{=data.is('deep','foo','bar') }}</b>   <br/>
    don't worry about defined data: {{=data.is('not','exist') }} <b>if not exist nothing append</b><br/>
    make a loop: 
    <ul>
        {{ while ( item = data.list.iterate() ) { }}
        <li>
              {{=item}}               
        </li>        
        {{ } }}
    </ul>    
    
    <h2>iterate loop</h2>
    and keep working your syntaxe highlight
    <ul>
        <script>
        /* script tag, instead of mustache-like syntax, is convenient for example when you want syntax highlight */
        while ( l = data.is('list').iterate() ) {
            print('<li> '+l.v()+' </li>'); 
        } 
        </script>
    </ul>
    
   
    <h2>more complex iterate loop</h2>
    
    <ul>
        <script> while ( loopdata = data.is('list').iterate() ) { </script>
            <li id="{{=loopdata.v()}}" data-fp-scope="scoped-part"> some html  code ...
              {{=loopdata.v()}}
            </li>           
        <script> } </script>        
    </ul>
    
    <button id="add">click for adding item</button>
<div>

CSS

/* make the stuff more pretty */ 
* {
    font-family:sans-serif;
}
h1 {
    font-size:20px;
}
h3 {
    font-size:18px;
}
button {
    padding:5px;
    margin-left:20px;
}
li {
    color:green;
}

JavaScript

$(function(){
    var template_data = { // define your data
        bar : 'hello world',
        deep : { 'foo' : { 'bar' : 'this data is in deep.foo.bar' } },
        list : [ 'hop', 'hip', 'hap', 'yip' , 'yep']
    };

    $(function () {
        var my_tpl = $4p.template($('#template').html()); // get html template
        $('#template').html(my_tpl.render(template_data)); // render html template + your data
    
        $(document).on('click', '#add', function () { // handle click on button
            $('[data-fp-scope-parent=scoped-part]').append(my_tpl.render('awesome data !', 'scoped-part', 'loopdata'));
        });
    });
});