From bd54ff899764823816a48b9ade56d62c5ce207ed Mon Sep 17 00:00:00 2001 From: Icyflash Date: Wed, 29 Aug 2012 19:20:17 +0800 Subject: [PATCH 1/3] Add Function Support For someone need format data before render. --- README.md | 64 +++++++------ t.js | 230 ++++++++++++++++++++++++++-------------------- t_test.html | 258 +++++++++++++++++++++++++++------------------------- 3 files changed, 300 insertions(+), 252 deletions(-) diff --git a/README.md b/README.md index 96bdf6d..d07a534 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,38 @@ -# t.js -## A tiny javascript templating framework in ~400 bytes gzipped - -`t.js` is a simple solution to interpolating values in an html string for insertion into the DOM via `innerHTML`. - -### Features - * Simple interpolation: `{{=value}}` - * Scrubbed interpolation: `{{%unsafe_value}}` - * Name-spaced variables: `{{=User.address.city}}` - * If/else blocks: `{{value}} <> {{:value}} <> {{/value}}` - * If not blocks: `{{!value}} <> {{/!value}}` - * Object/Array iteration: `{{@object_value}} {{=_key}}:{{=_val}} {{/@object_value}}` - * Multi-line templates (no removal of newlines required to render) - * Render the same template multiple times with different data - * Works in all modern browsers - -### How to use - - var template = new t("
Hello {{=name}}
"); - document.body.innerHtml = template.render({name: "World!"}); - -For more advanced usage check the [`t_test.html`](https://github.com/jasonmoo/t.js/blob/master/t_test.html). - -This software is released under the MIT license. - -___ - +# t.js +## A tiny javascript templating framework in ~400 bytes gzipped + +`t.js` is a simple solution to interpolating values in an html string for insertion into the DOM via `innerHTML`. + +### Features + * Simple interpolation: `{{=value}}` + * Scrubbed interpolation: `{{%unsafe_value}}` + * Name-spaced variables: `{{=User.address.city}}` + * If/else blocks: `{{value}} <> {{:value}} <> {{/value}}` + * If not blocks: `{{!value}} <> {{/!value}}` + * Object/Array iteration: `{{@object_value}} {{=_key}}:{{=_val}} {{/@object_value}}` + * Function Support: `{{#value|func,func2}}` + * Multi-line templates (no removal of newlines required to render) + * Render the same template multiple times with different data + * Works in all modern browsers + +### How to use + + var template = new t("
Hello {{=name}}
"); + document.body.innerHtml = template.render({name: "World!"}); + +### How Function works + + var template = new t("
{{=name}}
"); + template.register("hello",function(data){return data+" Hello";}) + template.register("world",function(data){return data+" world!";}) + document.body.innerHtml = template.render({name: "Icy!"}); + + //return Icy! Hello world! + +For more advanced usage check the [`t_test.html`](https://github.com/jasonmoo/t.js/blob/master/t_test.html). + +This software is released under the MIT license. + +___ + [Coffeescript version](https://github.com/davidrekow/t.coffee) maintained by [@davidrekow](https://github.com/davidrekow) \ No newline at end of file diff --git a/t.js b/t.js index b4939ad..69d734a 100644 --- a/t.js +++ b/t.js @@ -1,99 +1,131 @@ -/* - _ _ - | | (_) - | |_ _ ___ - | __| | / __| - | |_ _| \__ \ - \__(_) |___/ - _/ | - |__/ - - t.js - a micro-templating framework in ~400 bytes gzipped - - @author Jason Mooberry - @license MIT - @version 0.1.0 - -*/ -(function() { - - var blockregex = /\{\{(([@!]?)(.+?))\}\}(([\s\S]+?)(\{\{:\1\}\}([\s\S]+?))?)\{\{\/\1\}\}/g, - valregex = /\{\{([=%])(.+?)\}\}/g; - - function t(template) { - this.t = template; - } - - function scrub(val) { - return new Option(val).innerHTML.replace(/"/g,"""); - } - - function get_value(vars, key) { - var parts = key.split('.'); - while (parts.length) { - if (!(parts[0] in vars)) { - return false; - } - vars = vars[parts.shift()]; - } - return vars; - } - - function render(fragment, vars) { - return fragment - .replace(blockregex, function(_, __, meta, key, inner, if_true, has_else, if_false) { - - var val = get_value(vars,key), temp = "", i; - - if (!val) { - - // handle if not - if (meta == '!') { - return render(inner, vars); - } - // check for else - if (has_else) { - return render(if_false, vars); - } - - return ""; - } - - // regular if - if (!meta) { - return render(if_true, vars); - } - - // process array/obj iteration - if (meta == '@') { - for (i in val) { - if (val.hasOwnProperty(i)) { - vars._key = i; - vars._val = val[i]; - temp += render(inner, vars); - } - } - delete vars._key; - delete vars._val; - return temp; - } - - }) - .replace(valregex, function(_, meta, key) { - var val = get_value(vars,key); - - if (val || val === 0) { - return meta == '%' ? scrub(val) : val; - } - return ""; - }); - } - - t.prototype.render = function (vars) { - return render(this.t, vars); - }; - - window.t = t; - -})(); +/* + _ _ + | | (_) + | |_ _ ___ + | __| | / __| + | |_ _| \__ \ + \__(_) |___/ + _/ | + |__/ + + t.js + a micro-templating framework in ~400 bytes gzipped + + @author Jason Mooberry + @license MIT + @version 0.1.0 + +*/ +(function() { + + var blockregex = /\{\{(([@!]?)(.+?))\}\}(([\s\S]+?)(\{\{:\1\}\}([\s\S]+?))?)\{\{\/\1\}\}/g, + valregex = /\{\{([=%#])(.+?)\}\}/g; + + function t(template) { + this.t = template; + } + + function scrub(val) { + return new Option(val).innerHTML.replace(/"/g,"""); + } + + function get_value(vars, key) { + var parts = key.split('.'); + while (parts.length) { + if (!(parts[0] in vars)) { + return false; + } + vars = vars[parts.shift()]; + } + return vars; + } + + function render(fragment, vars) { + return fragment + .replace(blockregex, function(_, __, meta, key, inner, if_true, has_else, if_false) { + + var val = get_value(vars,key), temp = "", i; + + if (!val) { + + // handle if not + if (meta == '!') { + return render(inner, vars); + } + // check for else + if (has_else) { + return render(if_false, vars); + } + + return ""; + } + + // regular if + if (!meta) { + return render(if_true, vars); + } + + // process array/obj iteration + if (meta == '@') { + for (i in val) { + if (val.hasOwnProperty(i)) { + vars._key = i; + vars._val = val[i]; + temp += render(inner, vars); + } + } + delete vars._key; + delete vars._val; + return temp; + } + + }) + .replace(valregex, function(_, meta, key) { + if (meta=='#') { + var fn=key.split('|'); + key=fn[0]; + var val=get_value(vars,key); + if (fn.length>1){ + var methods=fn[1].split(','); + var j=methods.length; + var i=0; + while(i - - - -t.js - - - -
- - - - - - - + + + + +t.js + + + +
+ + + + + + + \ No newline at end of file From ea38e6b9974dcffe8ab1f2a438066053ea569d82 Mon Sep 17 00:00:00 2001 From: Icyflash Date: Wed, 29 Aug 2012 19:24:13 +0800 Subject: [PATCH 2/3] Readme fixed function description --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d07a534..b3bae91 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ ### How Function works - var template = new t("
{{=name}}
"); + var template = new t("
{{#name|hello,world}}
"); template.register("hello",function(data){return data+" Hello";}) template.register("world",function(data){return data+" world!";}) document.body.innerHtml = template.render({name: "Icy!"}); From 31cb3845e7f50f552dd5714ade08622f4a99422d Mon Sep 17 00:00:00 2001 From: Icyflash Date: Wed, 29 Aug 2012 19:30:12 +0800 Subject: [PATCH 3/3] compress t.min.js --- t.min.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/t.min.js b/t.min.js index 2293d62..89d3970 100644 --- a/t.min.js +++ b/t.min.js @@ -1,2 +1,2 @@ -(function(){function f(a){this.t=a}function j(a,b){for(var c=b.split(".");c.length;){if(!(c[0]in a))return!1;a=a[c.shift()]}return a}function d(a,b){return a.replace(h,function(c,a,e,f,k,h,i,l){var c=j(b,f),a="",g;if(!c)return"!"==e?d(k,b):i?d(l,b):"";if(!e)return d(h,b);if("@"==e){for(g in c)c.hasOwnProperty(g)&&(b._key=g,b._val=c[g],a+=d(k,b));delete b._key;delete b._val;return a}}).replace(i,function(a,d,e){return(a=j(b,e))||0===a?"%"==d?(new Option(a)).innerHTML.replace(/"/g,"""):a:""})} -var h=/\{\{(([@!]?)(.+?))\}\}(([\s\S]+?)(\{\{:\1\}\}([\s\S]+?))?)\{\{\/\1\}\}/g,i=/\{\{([=%])(.+?)\}\}/g;f.prototype.render=function(a){return d(this.t,a)};window.t=f})(); \ No newline at end of file +(function(){function e(a){this.t=a}function h(a,c){for(var i=c.split(".");i.length;){if(!(i[0]in a))return!1;a=a[i.shift()]}return a}function f(a,c){return a.replace(j,function(a,d,b,e,l,j,k,m){var a=h(c,e),d="",g;if(!a)return"!"==b?f(l,c):k?f(m,c):"";if(!b)return f(j,c);if("@"==b){for(g in a)a.hasOwnProperty(g)&&(c._key=g,c._val=a[g],d+=f(l,c));delete c._key;delete c._val;return d}}).replace(k,function(a,d,b){if("#"==d){d=b.split("|");b=d[0];b=h(c,b);if(1