Twig.js Playground

by justjohn

HTML

<script src="http://rc.foundryjs.com/twig/twig.js"></script>
<script type="text/twig" data-twig-id="filter">
    {{ "a quick brown fox"|backwords }}
    {# output: fox brown quick a #}
    <br><br>
</script>

<script type="text/twig" data-twig-id="function">
    {{ repeat("_.", 10) }}
    {# output: _._._._._._._._._._. #}
    <br><br>
</script>


<script type="text/twig" data-twig-id="test">
    {% if ('' + '') is empty  %}Yes!{% else %}Wrong{% endif %}
    <br><br>
</script>

<script type="text/twig" data-twig-id="forloop">
    {% set outerloop = [1, 1, 1, 1] %}
    
    {% set value = 'b' %}
    {% set known_values = [{'val': 'a'}, {'val': 'b'}, {'val': 'c'}] %}
    
    {% for _ in outerloop %}
        {% for known in known_values if known.val == value %}
            match!
        {% else %}
            no match!
        {% endfor %}
    {% endfor %}
</script>

JavaScript

console.log(Twig);

Twig.extendFilter("backwords", function(value) {
    console.log(this);
    return value.split(" ").reverse().join(" ");
});

Twig.extendFunction("repeat", function(value, times) {
    console.log(this);
    return new Array(times+1).join(value);
});

Twig.extendTest("empty", function(value, params) {
    console.log(value);
    return value === 0;
});

$("script[type='text/twig']").each(function() {
    var id = $(this).data("twig-id"),
        data = $(this).text();
    
    twig({
        id: id,
        data: data
    });
});

$("body").append(
    //twig({ref: 'filter'}).render({a: 'test'}),
    //twig({ref: 'function'}).render({a: 'test'}),
    //twig({ref: 'test'}).render({a: 'test'}),
    twig({ref: 'forloop'}).render()
);