├── fonts ├── Forque-webfont.eot ├── Forque-webfont.ttf ├── Forque-webfont.woff ├── Tup Wanders Font License.txt └── Forque-webfont.svg ├── README.md ├── doT.min.js ├── style.css ├── index.html └── script.js /fonts/Forque-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garann/template-chooser/HEAD/fonts/Forque-webfont.eot -------------------------------------------------------------------------------- /fonts/Forque-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garann/template-chooser/HEAD/fonts/Forque-webfont.ttf -------------------------------------------------------------------------------- /fonts/Forque-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garann/template-chooser/HEAD/fonts/Forque-webfont.woff -------------------------------------------------------------------------------- /fonts/Tup Wanders Font License.txt: -------------------------------------------------------------------------------- 1 | Free font by Tup Wanders 2 | http://www.tupwanders.nl 3 | 4 | Licensed with a Creative Commons attribution license. 5 | 6 | If you add to the font, please send me a copy! If you've made fun stuff with the font that you would like to show me, please send me that as well. I like that. 7 | 8 | Have fun, 9 | Tuppus -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HELLO FRIENDS. 2 | 3 | This project is no longer being updated for the following reasons: 4 | - The sorting options need an overhaul to be more relevant to the way JS templates are currently used (e.g., parsing speed matters very little in a real-world app where templates should be compiled on the server) 5 | - A standard of popularity, longevity, or both needs to be applied to sort viable options from things someone built for themself and made open source as an afterthought 6 | - __Many of the most currently popular template engines come bundled with a larger framework and cannot be examined on their own__ 7 | 8 | I don't recommend you use this to decide which stand-alone templating solution will meet your needs, because in most cases it's likely your needs would be better met by a framework wrapping templating with additional functionality. 9 | 10 | -------------------------------------------------------------------------------- /doT.min.js: -------------------------------------------------------------------------------- 1 | /* Laura Doktorova https://github.com/olado/doT */(function(){function o(){var a={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/"},b=/&(?!#?\w+;)|<|>|"|'|\//g;return function(){return this?this.replace(b,function(c){return a[c]||c}):this}}function p(a,b,c){return(typeof b==="string"?b:b.toString()).replace(a.define||i,function(l,e,f,g){if(e.indexOf("def.")===0)e=e.substring(4);if(!(e in c))if(f===":"){a.defineParams&&g.replace(a.defineParams,function(n,h,d){c[e]={arg:h,text:d}});e in c||(c[e]=g)}else(new Function("def","def['"+ 2 | e+"']="+g))(c);return""}).replace(a.use||i,function(l,e){if(a.useParams)e=e.replace(a.useParams,function(g,n,h,d){if(c[h]&&c[h].arg&&d){g=(h+":"+d).replace(/'|\\/g,"_");c.__exp=c.__exp||{};c.__exp[g]=c[h].text.replace(RegExp("(^|[^\\w$])"+c[h].arg+"([^\\w$])","g"),"$1"+d+"$2");return n+"def.__exp['"+g+"']"}});var f=(new Function("def","return "+e))(c);return f?p(a,f,c):f})}function m(a){return a.replace(/\\('|\\)/g,"$1").replace(/[\r\t\n]/g," ")}var j={version:"1.0.0",templateSettings:{evaluate:/\{\{([\s\S]+?\}?)\}\}/g, 3 | interpolate:/\{\{=([\s\S]+?)\}\}/g,encode:/\{\{!([\s\S]+?)\}\}/g,use:/\{\{#([\s\S]+?)\}\}/g,useParams:/(^|[^\w$])def(?:\.|\[[\'\"])([\w$\.]+)(?:[\'\"]\])?\s*\:\s*([\w$\.]+|\"[^\"]+\"|\'[^\']+\'|\{[^\}]+\})/g,define:/\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,defineParams:/^\s*([\w$]+):([\s\S]+)/,conditional:/\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,iterate:/\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,varname:"it",strip:true,append:true,selfcontained:false},template:undefined, 4 | compile:undefined};if(typeof module!=="undefined"&&module.exports)module.exports=j;else if(typeof define==="function"&&define.amd)define(function(){return j});else(function(){return this||(0,eval)("this")})().doT=j;String.prototype.encodeHTML=o();var q={append:{start:"'+(",end:")+'",endencode:"||'').toString().encodeHTML()+'"},split:{start:"';out+=(",end:");out+='",endencode:"||'').toString().encodeHTML();out+='"}},i=/$^/;j.template=function(a,b,c){b=b||j.templateSettings;var l=b.append?q.append: 5 | q.split,e,f=0,g;a=b.use||b.define?p(b,a,c||{}):a;a=("var out='"+(b.strip?a.replace(/(^|\r|\n)\t* +| +\t*(\r|\n|$)/g," ").replace(/\r|\n|\t|\/\*[\s\S]*?\*\//g,""):a).replace(/'|\\/g,"\\$&").replace(b.interpolate||i,function(h,d){return l.start+m(d)+l.end}).replace(b.encode||i,function(h,d){e=true;return l.start+m(d)+l.endencode}).replace(b.conditional||i,function(h,d,k){return d?k?"';}else if("+m(k)+"){out+='":"';}else{out+='":k?"';if("+m(k)+"){out+='":"';}out+='"}).replace(b.iterate||i,function(h, 6 | d,k,r){if(!d)return"';} } out+='";f+=1;g=r||"i"+f;d=m(d);return"';var arr"+f+"="+d+";if(arr"+f+"){var "+k+","+g+"=-1,l"+f+"=arr"+f+".length-1;while("+g+" 2 | 3 | 4 | 5 | So you need a template engine.. 6 | 7 | 8 | 9 | Fork me on GitHub 10 |

Template-Engine-Chooser!

11 |

This tool is not being updated — more info

12 |
13 |
14 | Is this for use on the client or the server? 15 | 16 | 17 | 18 |
19 |
20 | How much logic should it have? 21 | 22 | 23 | 24 |
25 |
26 | Does it need to be one of the very fastest? 27 | 28 | 29 |
30 |
31 | Do you need to pre-compile templates? 32 | 33 | 34 |
35 |
36 | Do you need compile-time partials? 37 | 38 | 39 |
40 |
41 | Do you want a DOM structure, or just a string? 42 | 43 | 44 |
45 |
46 | Aside from template tags, should it be the same language before and after rendering? 47 | 48 | 49 |
50 |
51 |
52 | 56 | 57 | 58 | 59 | 60 | 71 | 72 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var engines = [ 2 | { 3 | name: "dom.js", 4 | link: "https://github.com/medikoo/domjs", 5 | link_text: "github", 6 | size: "", 7 | traits: [ "client-side","server-side","logicful","compile","dom","not-format" ] 8 | }, 9 | { 10 | name: "doT.js", 11 | link: "http://olado.github.com/doT/", 12 | link_text: "project", 13 | size: "2.742k", 14 | traits: [ "client-side","server-side","logicful","speedy","compile","parts","string","format" ] 15 | }, 16 | { 17 | name: "dust.js (LinkedIn)", 18 | link: "http://github.com/linkedin/dustjs/", 19 | link_text: "github", 20 | size: "9.3k", 21 | traits: [ "client-side","server-side","logicish","compile","parts","string","format" ] 22 | }, 23 | { 24 | name: "EJS", 25 | link: "http://embeddedjs.com/", 26 | link_text: "project", 27 | size: "9.8k", 28 | traits: [ "client-side","server-side","logicful","compile","parts","string","format" ] 29 | }, 30 | { 31 | name: "Handlebars.js", 32 | link: "http://handlebarsjs.com/", 33 | link_text: "project", 34 | size: "", 35 | traits: [ "client-side","server-side","logicish","compile","parts","string","format" ] 36 | }, 37 | { 38 | name: "Hogan.js", 39 | link: "http://twitter.github.com/hogan.js/", 40 | link_text: "project", 41 | size: "2.5k", 42 | traits: [ "client-side","server-side","logicish","compile","parts","string","format" ] 43 | }, 44 | { 45 | name: "ICanHaz.js", 46 | link: "http://icanhazjs.com/", 47 | link_text: "project", 48 | size: "5.445k", 49 | traits: [ "client-side","logicish","parts","string","format" ] 50 | }, 51 | { 52 | name: "Jade templates", 53 | link: "https://github.com/visionmedia/jade", 54 | link_text: "github", 55 | size: "39.687k", 56 | traits: [ "client-side","server-side","logicish","compile","parts","string","not-format" ] 57 | }, 58 | { 59 | name: "JsRender", 60 | link: "http://borismoore.github.com/jsrender/demos/index.html", 61 | link_text: "project", 62 | size: "30.709k", 63 | traits: [ "client-side","server-side","logicish","compile","parts","string","format" ] 64 | }, 65 | { 66 | name: "Markup.js", 67 | link: "https://github.com/adammark/Markup.js", 68 | link_text: "github", 69 | size: "5.1k", 70 | traits: [ "client-side","server-side","logicish","string","format" ] 71 | }, 72 | { 73 | name: "Microtemplating", 74 | link: "http://ejohn.org/blog/javascript-micro-templating/", 75 | link_text: "blog post", 76 | size: "1k", 77 | traits: [ "client-side","server-side","logicful","speedy","compile","parts","string","not-format" ] 78 | }, 79 | { 80 | name: "Mustache.js", 81 | link: "https://github.com/janl/mustache.js/", 82 | link_text: "github", 83 | size: "14.513k", 84 | traits: [ "client-side","server-side","logicish","compile","parts","string","format" ] 85 | }, 86 | { 87 | name: "Nunjucks", 88 | link: "https://github.com/jlongster/nunjucks", 89 | link_text: "github", 90 | size: "20k", 91 | traits: [ "client-side","server-side","logicish","compile","parts","string","format" ] 92 | }, 93 | { 94 | name: "Plates.js", 95 | link: "https://github.com/flatiron/plates", 96 | link_text: "github", 97 | size: "10.811k", 98 | traits: [ "client-side","server-side","logicless","string","format" ] 99 | }, 100 | { 101 | name: "pure.js", 102 | link: "http://beebole.com/pure", 103 | link_text: "project", 104 | size: "11.7k", 105 | traits: [ "client-side","logicless","compile","parts","dom","format" ] 106 | }, 107 | { 108 | name: "Transparency", 109 | link: "http://leonidas.github.com/transparency/", 110 | link_text: "project", 111 | size: "5.491k", 112 | traits: [ "client-side","logicless","dom","format" ] 113 | }, 114 | { 115 | name: "Underscore templates", 116 | link: "http://documentcloud.github.com/underscore/#template", 117 | link_text: "project", 118 | size: "4k", 119 | traits: [ "client-side","server-side","logicful","compile","string","format","speedy" ] 120 | } 121 | ], 122 | chooser = { 123 | choices: [] 124 | }; 125 | 126 | $( function () { 127 | // render all engines 128 | var tmpls = doT.template( $( "#tmplsTmpl" ).text() ), 129 | $eng = $( "div.engines" ); 130 | $eng.html( tmpls( { all: engines } ) ); 131 | 132 | $( "div.criteria" ).on( "click", "fieldset", function() { 133 | var $t = $( this ); 134 | if ( $t.hasClass( "on" ) ) { 135 | $t.removeClass( "on" ); 136 | removeSibs( $t.find( "label" ) ); 137 | updateClasses(); 138 | } else { 139 | $t.addClass( "on" ); 140 | var curr = $t.find( "input:checked" ); 141 | if ( curr.length ) { 142 | setCriteria( curr.parent() ); 143 | } 144 | } 145 | }); 146 | $( "div.criteria" ).on( "click", "label", function( e ) { 147 | e.stopPropagation(); 148 | setCriteria( this ); 149 | }); 150 | 151 | function setCriteria( lbl ) { 152 | var $t = $( lbl ), 153 | cname = $t.find( "input" ).val(), 154 | classes; 155 | 156 | removeSibs( $t.siblings( "label" ) ); 157 | if ( cname.length ) { 158 | $.each( cname.split( "." ), function( i, nm ) { 159 | if ( chooser.choices.indexOf( nm ) === -1 ) { 160 | chooser.choices.push( nm ); 161 | } 162 | }); 163 | } 164 | updateClasses(); 165 | } 166 | 167 | function removeSibs( sibs ) { 168 | var removeIndex; 169 | 170 | $( sibs ).each( function() { 171 | removeIndex = chooser.choices.indexOf( $( this ).find( "input" ).val() ); 172 | if ( removeIndex > -1 ) chooser.choices.splice( removeIndex, 1 ); 173 | }); 174 | } 175 | 176 | function updateClasses() { 177 | if ( !chooser.choices.length ) { 178 | $eng.find( "div.remove" ).addClass( "add" ).removeClass( "remove" ); 179 | return; 180 | } 181 | classes = chooser.choices.join( "." ); 182 | $eng.find( "div:not(." + classes + ")" ).addClass( "remove" ).removeClass( "add" ); 183 | $eng.find( "div." + classes ).addClass( "add" ).removeClass( "remove" ); 184 | } 185 | }); 186 | -------------------------------------------------------------------------------- /fonts/Forque-webfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG webfont generated by Font Squirrel. 6 | Copyright : Typeface your company 2009 All Rights Reserved 7 | Designer : Tup Wanders 8 | Foundry : Free font dont sell 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | --------------------------------------------------------------------------------