JSFiddle - React, Tailwind, and code Playground
by lomatek
HTML
<div id="out"></div>
<script type="text/x-jquery-tmpl" id='tmpl'>
{{#def.w}}
<td><input type="checkbox" checked="<%= it.checked%>"></td>
<td><a><%= it.get('name')%></a></td>
<td><%= it.get('enable') ? it.locale('enable_true') : it.locale('enable_false')%></td>
<td><%= it.get('color')%></td>
<td><%= it.get('description')%></td>
</script>
JavaScript
Template = {
settings: {
//evaluate: /\{\{([\s\S]+?)\}\}/g,
//interpolate: /\{\{=([\s\S]+?)\}\}/g,
// SYNC UnderScore
evaluate: /<%([\s\S]+?)%>/g,
interpolate: /<%=([\s\S]+?)%>/g,
//
encode: /\{\{!([\s\S]+?)\}\}/g,
use: /\{\{#([\s\S]+?)\}\}/g,
//compile time evaluation
define: /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
//compile time defs
conditionalStart: /\{\{\?([\s\S]+?)\}\}/g,
conditionalEnd: /\{\{\?\}\}/g,
varname: 'it',
strip: true,
append: true
},
resolveDefs: function (c, block, def) {
return ((typeof block === 'string') ? block : block.toString()).replace(c.define, function (match, code, assign, value) {
if (code.indexOf('def.') === 0) {
code = code.substring(4);
}
if (!(code in def)) {
if (assign === ':') {
def[code] = value;
} else {
eval("def[code]=" + value);
}
}
return '';
}).replace(c.use, function (match, code) {
var v = eval(code);
return v ? this.resolveDefs(c, v, def) : v;
});
},
template: function (tmpl, c, def) {
c = c || this.settings;
var cstart = c.append ? "'+(" : "';out+=(",
// optimal choice depends on platform/size of templates
cend = c.append ? ")+'" : ");out+='",
str = (c.use || c.define) ? this.resolveDefs(c, tmpl, def || {}) : tmpl;
str = ("var out='" + ((c.strip) ? str.replace(/\s*<!\[CDATA\[\s*|\s*\]\]>\s*|[\r\n\t]|(\/\*[\s\S]*?\*\/)/g, '') : str).replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(c.interpolate, function (match, code) {
...