Попользовав шаблонизатор для JavaScript, мне показалось, что в нем содержутся некие излишние данные в виде повторяющихся ключей в массивах значений. В этой редакции добавленна возможность устанавливать отдельно ключи, отдельно данные в обычных, а не ассоциативных массивах. Что позволяет существенно уменьшить объем передаваемого с серверной стороны кода.
| template(t) | Конструктор объекта, может получать в аргументе t шаблон. |
| set_keys(keys) | Передает в объект массив ключей. После установки массива ключей, для замены ключей на значения в функции out(), будет использована функция replacek() |
| set_vals(vals) | Передает в объект необходимые данные:
|
| set_templ(t) | Устанавливает или переопределяет шаблон |
| replace(rv, vals) | Функция замены ключей на значения из массива vals в строке rv. Используется в методе out(). |
| replacek(rv, vals) | Функция замены ключей из keys на значения из массива vals в строке rv. Используется в методе out(). |
| out(mo, id) | Функция вывода темплейта в innerHTML элемента id (с id = id) или возвращает строку с обработанным шаблоном. При mo == true, обрабатывает многомерный массив данных. |
В качестве ограничителя ключа по умолчанию используется знак "!". Его можно заменить на нужный присвоив значения template.bc и template.ec (для начала и конца ключа соответственно)
////////////////////////////////////////////////////////////////////////////////////
////
//// object template by evg 07.03.2011
//// http://uggway.ru
////
////////////////////////////////////////////////////////////////////////////////////
var template = function(t){
if(t) this.templ = t;
}
template.prototype={
templ:"",
keys:[],
vals:[],
bc:"!",
ec:"!",
set_vals:function(vals){
this.vals = vals;
},
set_keys:function(keys){
this.keys = keys;
},
set_templ:function(t){
this.templ = t;
},
replace:function(rv, vals){
for(var v in vals) {
var re = new RegExp(this.bc + v + this.ec, "g");
rv = rv.replace(re, vals[v]);
}
return rv;
},
replacek:function(rv, vals){
for(var k=0; k < this.keys.length; k++) {
var re = new RegExp(this.bc + this.keys[k] + this.ec, "g");
rv = rv.replace(re, vals[k]);
}
return rv;
},
out:function(mo, id){
var rv = "";
var t;
var tt = this.templ;
if(typeof id == "string") id = document.getElementById(id);
if(mo) {
for(var v in this.vals){
if(this.keys.length > 0) t = this.replacek(tt, this.vals[v]); else t = this.replace(tt, this.vals[v]);
rv += t;
}
}
else
{
if(this.keys.length > 0) rv = this.replacek(tt, this.vals); else rv = this.replace(tt, this.vals);
}
if(id) id.innerHTML = rv;
else return rv;
}
}
Пример применения
<html>
<head>
<script src='template2.js'></script>
<style>
.dcl{
padding:5px;
border:1px solid gray;
background:#f0f0f0;
float:left;
display:block;
}
.dcl:hover{
border:1px solid #cecece;
background:#f5f5f5;
}
#outdiv{
border:1px solid gray;
width:500px;
}
#menu{
border:1px solid gray;
}
#body{
text-align:center;
border:1px solid gray;
height:300px;
}
#footer{
border:1px solid gray;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id='outdiv'></div>
<script>
var tex_base = "<div id='menu'>!menu!<div style='clear:both'></div></div><div id='body'>!body!</div>"
"<div id='footer'>!footer!</div>";
var tex_menu = "<div class='dcl'><a href='!url!'>!name!</a></div>";
var data_ex=[
["name1", "url1"],
["name2", "url2"],
["name3", "url3"],
["name4", "url4"],
["name5", "url5"]
];
var keys_ex = ["name", "url"];
var tm = new template( tex_menu ); // create menu
tm.set_vals( data_ex ); // set data values
tm.set_keys( keys_ex ); // set keys values
var tb = new template(tex_base); // create base
var data_base = {"menu": tm.out( true ), "body": "Body message!", "footer":"this is footer :)"};
tb.set_vals( data_base );
tb.out( false, 'outdiv');
</script>
</body>
</html>
Вот еще более реальный пример применения шаблона. Здесь показана таблица имеющая возможность сортировки строк без перезагрузки страницы. К этому примеру легко можно добавить функционал добавления и удаленя строк и другие необходимые действия.