JSFiddle - React, Tailwind, and code Playground

by Peter Å irka

HTML

<script src="http://source.858project.com/tangular.min.js"></script>
OPEN CONSOLE

<script id="template1" type="text/html">
{{if name.length > 0}}
    <div>OK</div>
{{else}}
    <div>NO</div>
{{endif}}
</script>

<script id="template2" type="text/html">
{{age | plus(5)}} vs. {{age | plus}}
</script>

<script id="template3" type="text/html">
{{foreach m in orders}}
    <h2>Order num.{{m.number}} (current index: {{$index}})</h2>
    <div>{{m.name}}</div>
{{end}}
</script>

<script id="template4" type="text/html">
--{{notdefined}}--
</script>

JavaScript

Tangular.register('plus', function(value, plus) {
    // example
    return value + (plus || 100);
});

var model = { name: 'total.js', age: 2, orders: [{ number: 1001, name: 'iPhone' }, { number: 1002, name: 'Samsung' }]};

var template1 = Tangular.compile(document.getElementById('template1').innerHTML);
var template2 = Tangular.compile(document.getElementById('template2').innerHTML);
var template3 = Tangular.compile(document.getElementById('template3').innerHTML);
var template4 = Tangular.compile(document.getElementById('template4').innerHTML);

console.log('TEMPLATE1', template1(model));
console.log('TEMPLATE2', template2(model));
console.log('TEMPLATE3', template3(model));
console.log('TEMPLATE4', template4(model));