JSFiddle - React, Tailwind, and code Playground

by dfsq

HTML

<script src="http://dfsq.info/media/files/templ.js"></script>
<script src="http://dfsq.info/media/files/templ.modifiers.js"></script>
<!-- TEMPLATES -->
<script type="html/template" id="tpl_users">
    <h2>For loop and if statement</h2>
    <ul>
        {% for user in users %}
        <li>
            <div>
                {{ user.id }}: {{ user.username|capitalize }}
                {% if user.tokens > _CONST.MIN_BALLANCE %}
                <a href="!#checkout/{{ user.id }}">Check out</a>
                {% endif %}
            </div>
        </li>
        {% else %}
        <li><em>No users</em></li>
        {% endfor %}
    </ul>
</script>

<script type="html/template" id="tpl_test">
    <h2>Modifiers tests</h2>
    <table>
        <tr>
            <td class="label">
                Original
                <div class="hint">title</div>
            </td>
            <td>{{ title }}</td>
        </tr>
        <tr>
            <td class="label">
                To upper case
                <div class="hint">title|upper</div>
            </td>
            <td>{{ title|upper }}</td>
        </tr>
        <tr>
            <td class="label">
                To lower case
                <div class="hint">title|lower</div>
            </td>
            <td>{{ title|lower }}</td>
        </tr>
        <tr>
            <td class="label">
                Capitalize string
                <div class="hint">title|capitalize</div>
            </td>
            <td>{{ title|capitalize }}</td>
        </tr>
        <tr>
            <td class="label">
                Each word capitalized
                <div class="hint">title|ucwords</div>
            </td>
            <td>{{ title|ucwords }}</td>
        </tr>
        <tr>
            <td class="label">
                Default value
                <div class="hint">emptyTitle|empty('This is default string')</div>
            </td>
            <td>{{ emptyTitle|empty('This is default string') }}</td>
        </tr>
       ...

CSS

* {font: 12px Verdana;}
b {font-weight: bold;}
h2 {font-size: 16px; font-weight: bold; margin-bottom: 10px;}
li {margin-bottom: 5px;}
ul {margin-bottom: 20px;}
table {border-collapse: collapse;}
td {padding: 5px; border: 1px #5f8ca3 solid;}
.label {padding-right: 10px; background-color: #cae8ca;}
.hint {color: #333; font-size: 10px;}

JavaScript

_CONST = {
    MIN_BALLANCE: 50
};

var html = Templ($('#tpl_users').html(), {
    users: [
        {id: 12, username: 'tomas', tokens: 54},
        {id: 14, username: 'orby13', tokens: 23}
    ]
});

// custom modifier
Templ.addModifiers({
    phoneFormat: function(str) {
        return str.replace(/(\d{3})(\d{4})(\d{3})/g, '($1) $2-$3');
    }
});

$('#content').html(html);

var html = Templ($('#tpl_test').html(), {
    title: 'someone left inside the Bottle',
    emptyTitle: ''
});
$('#content').append(html);