Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

demo

  • Loading branch information...
commit a0a2b742f49850ede6e1e8ee94be3d80e1a3d22f 1 parent fcb5521
@defunkt defunkt authored
View
27 burt.css
@@ -1,8 +1,10 @@
body {
font-family: Georgia;
+ color: #333;
}
#logo {
+ color: #000;
height: 180px;
width: 200px;
-webkit-transform: rotate(-90deg);
@@ -24,4 +26,27 @@ p {
font-size: 30px;
margin-bottom: 20px;
text-align: left;
-}
+}
+
+label {
+
+}
+
+textarea, .html {
+ border: 1px solid #bbb;
+ padding: 5px;
+ width: 100%;
+ height: 350px;
+ font-size: 18px;
+ font-family: Inconsolata, monaco, courier;
+ margin-bottom: 20px;
+}
+
+.json {
+ margin-bottom: 0;
+}
+
+.run {
+ margin-bottom: 20px;
+ font-size: 130%;
+}
View
1  extras/coffee-script.js
1 addition, 0 deletions not shown
View
66 extras/highlight.css
@@ -0,0 +1,66 @@
+pre.sh_sourceCode {
+ background-color: white;
+ color: black;
+ font-style: normal;
+ font-weight: normal;
+}
+
+pre.sh_sourceCode .sh_keyword { color: blue; font-weight: bold; } /* language keywords */
+pre.sh_sourceCode .sh_type { color: darkgreen; } /* basic types */
+pre.sh_sourceCode .sh_usertype { color: teal; } /* user defined types */
+pre.sh_sourceCode .sh_string { color: red; font-family: monospace; } /* strings and chars */
+pre.sh_sourceCode .sh_regexp { color: orange; font-family: monospace; } /* regular expressions */
+pre.sh_sourceCode .sh_specialchar { color: pink; font-family: monospace; } /* e.g., \n, \t, \\ */
+pre.sh_sourceCode .sh_comment { color: brown; font-style: italic; } /* comments */
+pre.sh_sourceCode .sh_number { color: purple; } /* literal numbers */
+pre.sh_sourceCode .sh_preproc { color: darkblue; font-weight: bold; } /* e.g., #include, import */
+pre.sh_sourceCode .sh_symbol { color: darkred; } /* e.g., <, >, + */
+pre.sh_sourceCode .sh_function { color: black; font-weight: bold; } /* function calls and declarations */
+pre.sh_sourceCode .sh_cbracket { color: red; } /* block brackets (e.g., {, }) */
+pre.sh_sourceCode .sh_todo { font-weight: bold; background-color: cyan; } /* TODO and FIXME */
+
+/* Predefined variables and functions (for instance glsl) */
+pre.sh_sourceCode .sh_predef_var { color: darkblue; }
+pre.sh_sourceCode .sh_predef_func { color: darkblue; font-weight: bold; }
+
+/* for OOP */
+pre.sh_sourceCode .sh_classname { color: teal; }
+
+/* line numbers (not yet implemented) */
+pre.sh_sourceCode .sh_linenum { color: black; font-family: monospace; }
+
+/* Internet related */
+pre.sh_sourceCode .sh_url { color: blue; text-decoration: underline; font-family: monospace; }
+
+/* for ChangeLog and Log files */
+pre.sh_sourceCode .sh_date { color: blue; font-weight: bold; }
+pre.sh_sourceCode .sh_time, pre.sh_sourceCode .sh_file { color: darkblue; font-weight: bold; }
+pre.sh_sourceCode .sh_ip, pre.sh_sourceCode .sh_name { color: darkgreen; }
+
+/* for Prolog, Perl... */
+pre.sh_sourceCode .sh_variable { color: darkgreen; }
+
+/* for LaTeX */
+pre.sh_sourceCode .sh_italics { color: darkgreen; font-style: italic; }
+pre.sh_sourceCode .sh_bold { color: darkgreen; font-weight: bold; }
+pre.sh_sourceCode .sh_underline { color: darkgreen; text-decoration: underline; }
+pre.sh_sourceCode .sh_fixed { color: green; font-family: monospace; }
+pre.sh_sourceCode .sh_argument { color: darkgreen; }
+pre.sh_sourceCode .sh_optionalargument { color: purple; }
+pre.sh_sourceCode .sh_math { color: orange; }
+pre.sh_sourceCode .sh_bibtex { color: blue; }
+
+/* for diffs */
+pre.sh_sourceCode .sh_oldfile { color: orange; }
+pre.sh_sourceCode .sh_newfile { color: darkgreen; }
+pre.sh_sourceCode .sh_difflines { color: blue; }
+
+/* for css */
+pre.sh_sourceCode .sh_selector { color: purple; }
+pre.sh_sourceCode .sh_property { color: blue; }
+pre.sh_sourceCode .sh_value { color: darkgreen; font-style: italic; }
+
+/* other */
+pre.sh_sourceCode .sh_section { color: black; font-weight: bold; }
+pre.sh_sourceCode .sh_paren { color: red; }
+pre.sh_sourceCode .sh_attribute { color: darkgreen; }
View
10 extras/highlight.js
@@ -0,0 +1,10 @@
+var Highlight = (function() {
+ if(!this.sh_languages){this.sh_languages={}}var sh_requests={};function sh_isEmailAddress(a){if(/^mailto:/.test(a)){return false}return a.indexOf("@")!==-1}function sh_setHref(b,c,d){var a=d.substring(b[c-2].pos,b[c-1].pos);if(a.length>=2&&a.charAt(0)==="<"&&a.charAt(a.length-1)===">"){a=a.substr(1,a.length-2)}if(sh_isEmailAddress(a)){a="mailto:"+a}b[c-2].node.href=a}function sh_konquerorExec(b){var a=[""];a.index=b.length;a.input=b;return a}function sh_highlightString(B,o){if(/Konqueror/.test(navigator.userAgent)){if(!o.konquered){for(var F=0;F<o.length;F++){for(var H=0;H<o[F].length;H++){var G=o[F][H][0];if(G.source==="$"){G.exec=sh_konquerorExec}}}o.konquered=true}}var N=document.createElement("a");var q=document.createElement("span");var A=[];var j=0;var n=[];var C=0;var k=null;var x=function(i,a){var p=i.length;if(p===0){return}if(!a){var Q=n.length;if(Q!==0){var r=n[Q-1];if(!r[3]){a=r[1]}}}if(k!==a){if(k){A[j++]={pos:C};if(k==="sh_url"){sh_setHref(A,j,B)}}if(a){var P;if(a==="sh_url"){P=N.cloneNode(false)}else{P=q.cloneNode(false)}P.className=a;A[j++]={node:P,pos:C}}}C+=p;k=a};var t=/\r\n|\r|\n/g;t.lastIndex=0;var d=B.length;while(C<d){var v=C;var l;var w;var h=t.exec(B);if(h===null){l=d;w=d}else{l=h.index;w=t.lastIndex}var g=B.substring(v,l);var M=[];for(;;){var I=C-v;var D;var y=n.length;if(y===0){D=0}else{D=n[y-1][2]}var O=o[D];var z=O.length;var m=M[D];if(!m){m=M[D]=[]}var E=null;var u=-1;for(var K=0;K<z;K++){var f;if(K<m.length&&(m[K]===null||I<=m[K].index)){f=m[K]}else{var c=O[K][0];c.lastIndex=I;f=c.exec(g);m[K]=f}if(f!==null&&(E===null||f.index<E.index)){E=f;u=K;if(f.index===I){break}}}if(E===null){x(g.substring(I),null);break}else{if(E.index>I){x(g.substring(I,E.index),null)}var e=O[u];var J=e[1];var b;if(J instanceof Array){for(var L=0;L<J.length;L++){b=E[L+1];x(b,J[L])}}else{b=E[0];x(b,J)}switch(e[2]){case -1:break;case -2:n.pop();break;case -3:n.length=0;break;default:n.push(e);break}}}if(k){A[j++]={pos:C};if(k==="sh_url"){sh_setHref(A,j,B)}k=null}C=w}return A}function sh_getClasses(d){var a=[];var b=d.className;if(b&&b.length>0){var e=b.split(" ");for(var c=0;c<e.length;c++){if(e[c].length>0){a.push(e[c])}}}return a}function sh_addClass(c,a){var d=sh_getClasses(c);for(var b=0;b<d.length;b++){if(a.toLowerCase()===d[b].toLowerCase()){return}}d.push(a);c.className=d.join(" ")}function sh_extractTagsFromNodeList(c,a){var f=c.length;for(var d=0;d<f;d++){var e=c.item(d);switch(e.nodeType){case 1:if(e.nodeName.toLowerCase()==="br"){var b;if(/MSIE/.test(navigator.userAgent)){b="\r"}else{b="\n"}a.text.push(b);a.pos++}else{a.tags.push({node:e.cloneNode(false),pos:a.pos});sh_extractTagsFromNodeList(e.childNodes,a);a.tags.push({pos:a.pos})}break;case 3:case 4:a.text.push(e.data);a.pos+=e.length;break}}}function sh_extractTags(c,b){var a={};a.text=[];a.tags=b;a.pos=0;sh_extractTagsFromNodeList(c.childNodes,a);return a.text.join("")}function sh_mergeTags(d,f){var a=d.length;if(a===0){return f}var c=f.length;if(c===0){return d}var i=[];var e=0;var b=0;while(e<a&&b<c){var h=d[e];var g=f[b];if(h.pos<=g.pos){i.push(h);e++}else{i.push(g);if(f[b+1].pos<=h.pos){b++;i.push(f[b]);b++}else{i.push({pos:h.pos});f[b]={node:g.node.cloneNode(false),pos:h.pos}}}}while(e<a){i.push(d[e]);e++}while(b<c){i.push(f[b]);b++}return i}function sh_insertTags(k,h){var g=document;var l=document.createDocumentFragment();var e=0;var d=k.length;var b=0;var j=h.length;var c=l;while(b<j||e<d){var i;var a;if(e<d){i=k[e];a=i.pos}else{a=j}if(a<=b){if(i.node){var f=i.node;c.appendChild(f);c=f}else{c=c.parentNode}e++}else{c.appendChild(g.createTextNode(h.substring(b,a)));b=a}}return l}function sh_highlightElement(d,g){sh_addClass(d,"sh_sourceCode");var c=[];var e=sh_extractTags(d,c);var f=sh_highlightString(e,g);var b=sh_mergeTags(c,f);var a=sh_insertTags(b,e);while(d.hasChildNodes()){d.removeChild(d.firstChild)}d.appendChild(a)}function sh_getXMLHttpRequest(){if(window.ActiveXObject){return new ActiveXObject("Msxml2.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}throw"No XMLHttpRequest implementation available"}function sh_load(language,element,prefix,suffix){if(language in sh_requests){sh_requests[language].push(element);return}sh_requests[language]=[element];var request=sh_getXMLHttpRequest();var url=prefix+"sh_"+language+suffix;request.open("GET",url,true);request.onreadystatechange=function(){if(request.readyState===4){try{if(!request.status||request.status===200){eval(request.responseText);var elements=sh_requests[language];for(var i=0;i<elements.length;i++){sh_highlightElement(elements[i],sh_languages[language])}}else{throw"HTTP error: status "+request.status}}finally{request=null}}};request.send(null)}function sh_highlightDocument(g,k){var b=document.getElementsByTagName("pre");for(var e=0;e<b.length;e++){var f=b.item(e);var a=sh_getClasses(f);for(var c=0;c<a.length;c++){var h=a[c].toLowerCase();if(h==="sh_sourcecode"){continue}if(h.substr(0,3)==="sh_"){var d=h.substring(3);if(d in sh_languages){sh_highlightElement(f,sh_languages[d])}else{if(typeof(g)==="string"&&typeof(k)==="string"){sh_load(d,f,g,k)}else{throw'Found <pre> element with class="'+h+'", but no such language exists'}}break}}}};
+ if(!this.sh_languages){this.sh_languages={}}sh_languages.html=[[[/<\?xml/g,"sh_preproc",1,1],[/<!DOCTYPE/g,"sh_preproc",3,1],[/<!--/g,"sh_comment",4],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",5,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",5,1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",2]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",2]],[[/-->/g,"sh_comment",-2],[/<!--/g,"sh_comment",4]],[[/(?:\/)?>/g,"sh_keyword",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",2]]];
+
+ return {
+ highlightDocument: function() {
+ return sh_highlightDocument.apply(this, arguments);
+ }
+ }
+})();
View
298 extras/mustache.js
@@ -0,0 +1,298 @@
+/*
+ Shameless port of http://github.com/defunkt/mustache
+ by Jan Lehnardt <jan@apache.org>,
+ Alexander Lang <alex@upstream-berlin.com>,
+ Sebastian Cohnen <sebastian.cohnen@googlemail.com>
+
+ Thanks @defunkt for the awesome code.
+
+ See http://github.com/defunkt/mustache for more info.
+*/
+
+var Mustache = function() {
+ var Renderer = function() {};
+
+ Renderer.prototype = {
+ otag: "{{",
+ ctag: "}}",
+ pragmas: {},
+ buffer: [],
+ pragmas_parsed: false,
+
+ render: function(template, context, partials, in_recursion) {
+ // fail fast
+ if(template.indexOf(this.otag) == -1) {
+ if(in_recursion) {
+ return template;
+ } else {
+ this.send(template);
+ return;
+ }
+ }
+
+ if(!in_recursion) {
+ this.buffer = [];
+ }
+
+ if(!this.pragmas_parsed) {
+ template = this.render_pragmas(template);
+ }
+ var html = this.render_section(template, context, partials);
+ if(in_recursion) {
+ return this.render_tags(html, context, partials, in_recursion);
+ }
+
+ this.render_tags(html, context, partials, in_recursion);
+ },
+
+ /*
+ Sends parsed lines
+ */
+ send: function(line) {
+ if(line != "") {
+ this.buffer.push(line);
+ }
+ },
+
+ /*
+ Looks for %PRAGMAS
+ */
+ render_pragmas: function(template) {
+ this.pragmas_parsed = true;
+ // no pragmas
+ if(template.indexOf(this.otag + "%") == -1) {
+ return template;
+ }
+
+ var that = this;
+ var regex = new RegExp(this.otag + "%([\\w_-]+) ?([\\w]+=[\\w]+)?"
+ + this.ctag);
+ return template.replace(regex, function(match, pragma, options) {
+ that.pragmas[pragma] = {};
+ if(options) {
+ var opts = options.split("=");
+ that.pragmas[pragma][opts[0]] = opts[1];
+ }
+ return "";
+ // ignore unknown pragmas silently
+ });
+ },
+
+ /*
+ Tries to find a partial in the global scope and render it
+ */
+ render_partial: function(name, context, partials) {
+ if(typeof(context[name]) != "object") {
+ throw({message: "subcontext for '" + name + "' is not an object"});
+ }
+ if(!partials || !partials[name]) {
+ throw({message: "unknown_partial '" + name + "'"});
+ }
+ return this.render(partials[name], context[name], partials, true);
+ },
+
+ /*
+ Renders boolean and enumerable sections
+ */
+ render_section: function(template, context, partials) {
+ if(template.indexOf(this.otag + "#") == -1) {
+ return template;
+ }
+ var that = this;
+ // CSW - Added "+?" so it finds the tighest bound, not the widest
+ var regex = new RegExp(this.otag + "\\#(.+)" + this.ctag +
+ "\\s*([\\s\\S]+?)" + this.otag + "\\/\\1" + this.ctag + "\\s*", "mg");
+
+ // for each {{#foo}}{{/foo}} section do...
+ return template.replace(regex, function(match, name, content) {
+ var value = that.find(name, context);
+ if(that.is_array(value)) { // Enumerable, Let's loop!
+ return that.map(value, function(row) {
+ return that.render(content, that.merge(context,
+ that.create_context(row)), partials, true);
+ }).join("");
+ } else if(value) { // boolean section
+ return that.render(content, context, partials, true);
+ } else {
+ return "";
+ }
+ });
+ },
+
+ /*
+ Replace {{foo}} and friends with values from our view
+ */
+ render_tags: function(template, context, partials, in_recursion) {
+ // tit for tat
+ var that = this;
+
+ var new_regex = function() {
+ return new RegExp(that.otag + "(=|!|>|\\{|%)?([^\/#]+?)\\1?" +
+ that.ctag + "+", "g");
+ };
+
+ var regex = new_regex();
+ var lines = template.split("\n");
+ for (var i=0; i < lines.length; i++) {
+ lines[i] = lines[i].replace(regex, function(match, operator, name) {
+ switch(operator) {
+ case "!": // ignore comments
+ return match;
+ case "=": // set new delimiters, rebuild the replace regexp
+ that.set_delimiters(name);
+ regex = new_regex();
+ return "";
+ case ">": // render partial
+ return that.render_partial(name, context, partials);
+ case "{": // the triple mustache is unescaped
+ return that.find(name, context);
+ default: // escape the value
+ return that.escape(that.find(name, context));
+ }
+ }, this);
+ if(!in_recursion) {
+ this.send(lines[i]);
+ }
+ }
+
+ if(in_recursion) {
+ return lines.join("\n");
+ }
+ },
+
+ set_delimiters: function(delimiters) {
+ var dels = delimiters.split(" ");
+ this.otag = this.escape_regex(dels[0]);
+ this.ctag = this.escape_regex(dels[1]);
+ },
+
+ escape_regex: function(text) {
+ // thank you Simon Willison
+ if(!arguments.callee.sRE) {
+ var specials = [
+ '/', '.', '*', '+', '?', '|',
+ '(', ')', '[', ']', '{', '}', '\\'
+ ];
+ arguments.callee.sRE = new RegExp(
+ '(\\' + specials.join('|\\') + ')', 'g'
+ );
+ }
+ return text.replace(arguments.callee.sRE, '\\$1');
+ },
+
+ /*
+ find `name` in current `context`. That is find me a value
+ from the view object
+ */
+ find: function(name, context) {
+ name = this.trim(name);
+ if(typeof context[name] === "function") {
+ return context[name].apply(context);
+ }
+ if(context[name] !== undefined) {
+ return context[name];
+ }
+ // silently ignore unkown variables
+ return "";
+ },
+
+ // Utility methods
+
+ /*
+ Does away with nasty characters
+ */
+ escape: function(s) {
+ return ((s == null) ? "" : s).toString().replace(/[&"<>\\]/g, function(s) {
+ switch(s) {
+ case "&": return "&amp;";
+ case "\\": return "\\\\";;
+ case '"': return '\"';;
+ case "<": return "&lt;";
+ case ">": return "&gt;";
+ default: return s;
+ }
+ });
+ },
+
+ /*
+ Merges all properties of object `b` into object `a`.
+ `b.property` overwrites a.property`
+ */
+ merge: function(a, b) {
+ var _new = {};
+ for(var name in a) {
+ if(a.hasOwnProperty(name)) {
+ _new[name] = a[name];
+ }
+ };
+ for(var name in b) {
+ if(b.hasOwnProperty(name)) {
+ _new[name] = b[name];
+ }
+ };
+ return _new;
+ },
+
+ // by @langalex, support for arrays of strings
+ create_context: function(_context) {
+ if(this.is_object(_context)) {
+ return _context;
+ } else if(this.pragmas["IMPLICIT-ITERATOR"]) {
+ var iterator = this.pragmas["IMPLICIT-ITERATOR"].iterator || ".";
+ var ctx = {};
+ ctx[iterator] = _context
+ return ctx;
+ }
+ },
+
+ is_object: function(a) {
+ return a && typeof a == "object";
+ },
+
+ is_array: function(a) {
+ return Object.prototype.toString.call(a) === '[object Array]';
+ },
+
+ /*
+ Gets rid of leading and trailing whitespace
+ */
+ trim: function(s) {
+ return s.replace(/^\s*|\s*$/g, "");
+ },
+
+ /*
+ Why, why, why? Because IE. Cry, cry cry.
+ */
+ map: function(array, fn) {
+ if (typeof array.map == "function") {
+ return array.map(fn)
+ } else {
+ var r = [];
+ var l = array.length;
+ for(i=0;i<l;i++) {
+ r.push(fn(array[i]));
+ }
+ return r;
+ }
+ }
+ };
+
+ return({
+ name: "mustache.js",
+ version: "0.2.3-dev",
+
+ /*
+ Turns a template and view into HTML
+ */
+ to_html: function(template, view, partials, send_fun) {
+ var renderer = new Renderer();
+ if(send_fun) {
+ renderer.send = send_fun;
+ }
+ renderer.render(template, view, partials);
+ if(!send_fun) {
+ return renderer.buffer.join("\n");
+ }
+ }
+ });
+}();
View
51 index.html
@@ -37,6 +37,7 @@
<head>
<title>&#123;&#123; mustache }}</title>
<link href="burt.css" media="screen" rel="stylesheet" type="text/css" />
+ <link href="extras/highlight.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<span id="logo">}</span>
@@ -68,5 +69,55 @@
<a href="mustache.1.html">mustache(1)</a> and
<a href="mustache.5.html">mustache(5)</a>
</p>
+
+ <p>
+ <a id="demo-link" href="#demo">Demo</a>
+ </p>
+
+ <div id="demo" >
+ <label>Mustache</label>
+ <textarea class="template">
+<h1>{{header}}</h1>
+{{#list}}
+ {{#item}}
+ {{#current}}
+ <li><strong>{{name}}</strong></li>
+ {{/current}}
+ {{#link}}
+ <li><a href="{{url}}">{{name}}</a></li>
+ {{/link}}
+ {{/item}}
+{{/list}}
+
+{{#empty}}
+ <p>The list is empty.</p>
+{{/empty}}
+</textarea>
+
+ <label>JSON</label>
+ <textarea class="json">{
+ "header": "Colors",
+ "item": [
+ {"name": "red", "current": true, "url": "#Red"},
+ {"name": "green", "current": false, "url": "#Green"},
+ {"name": "blue", "current": false, "url": "#Blue"}
+ ],
+ "link": true,
+ "list": true,
+ "empty": false
+}</textarea>
+
+ <p><input type="button" class="run" value="Render Template"/></p>
+
+ <label>HTML</label>
+ <pre class="html sh_html"></pre>
+ </div>
</div>
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+ <script src="extras/coffee-script.js"></script>
+ <script src="extras/mustache.js"></script>
+ <script src="extras/highlight.js"></script>
+ <script src="tom.js"></script>
+ </body>
</html>
View
25 index.mustache
@@ -37,6 +37,7 @@ i__p__ / | ############## | | ####### |__l___xp____| ooooo | |~~~~|
<head>
<title>&#123;&#123; mustache }}</title>
<link href="burt.css" media="screen" rel="stylesheet" type="text/css" />
+ <link href="extras/highlight.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<span id="logo">}</span>
@@ -68,5 +69,29 @@ i__p__ / | ############## | | ####### |__l___xp____| ooooo | |~~~~|
<a href="mustache.1.html">mustache(1)</a> and
<a href="mustache.5.html">mustache(5)</a>
</p>
+
+ <p>
+ <a id="demo-link" href="#demo">Demo</a>
+ </p>
+
+ <div id="demo" {{#hide_demo}} style="display:none;"{{/hide_demo}}>
+ <label>Mustache</label>
+ <textarea class="template">{{>template}}</textarea>
+
+ <label>JSON</label>
+ <textarea class="json">{{>json}}</textarea>
+
+ <p><input type="button" class="run" value="Render Template"/></p>
+
+ <label>HTML</label>
+ <pre class="html sh_html"></pre>
+ </div>
</div>
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+ <script src="extras/coffee-script.js"></script>
+ <script src="extras/mustache.js"></script>
+ <script src="extras/highlight.js"></script>
+ <script src="tom.js"></script>
+ </body>
</html>
View
11 json.mustache
@@ -0,0 +1,11 @@
+{
+ "header": "Colors",
+ "item": [
+ {"name": "red", "current": true, "url": "#Red"},
+ {"name": "green", "current": false, "url": "#Green"},
+ {"name": "blue", "current": false, "url": "#Blue"}
+ ],
+ "link": true,
+ "list": true,
+ "empty": false
+}
View
20 template.mustache
@@ -0,0 +1,20 @@
+{{=| |=}}
+<h1>{{header}}</h1>
+{{#bug}}
+{{/bug}}
+
+{{#list}}
+ {{#item}}
+ {{#current}}
+ <li><strong>{{name}}</strong></li>
+ {{/current}}
+ {{#link}}
+ <li><a href="{{url}}">{{name}}</a></li>
+ {{/link}}
+ {{/item}}
+{{/list}}
+
+{{#empty}}
+ <p>The list is empty.</p>
+{{/empty}}
+|={{ }}=|
View
13 tom.coffee
@@ -0,0 +1,13 @@
+$ ->
+ $('#demo-link2').click ->
+ $('#demo').show()
+ console.log 'clicked demo'
+ true
+
+ $('#demo .run').click ->
+ console.log 'clicked run'
+ template: $('#demo .template').val()
+ json: $.parseJSON $('#demo .json').val()
+ html: Mustache.to_html(template, json)
+ $('#demo .html').text(html)
+ Highlight.highlightDocument()
View
16 tom.js
@@ -0,0 +1,16 @@
+$(function() {
+ $('#demo-link2').click(function() {
+ $('#demo').show();
+ console.log('clicked demo');
+ return true;
+ });
+ return $('#demo .run').click(function() {
+ var html, json, template;
+ console.log('clicked run');
+ template = $('#demo .template').val();
+ json = $.parseJSON($('#demo .json').val());
+ html = Mustache.to_html(template, json);
+ $('#demo .html').text(html);
+ return Highlight.highlightDocument();
+ });
+});
Please sign in to comment.
Something went wrong with that request. Please try again.