Компактный и гибкий Javascript шаблонизатор

В последние дни на Хабре одна за одной вышли несколько статей посвященных шаблонизаторам на Javascript.
Идея вынести «View» из паттерна MVC на сторону клиента очень интересная, но поизучав существующие билиотеки я понял что мне категорически не хватает их возможностей. Простейший обход свойств объекта зачастую был невозможен.
Естественным образом родилась идея использовать в качестве языка разметки тот же Javascript.

Код получился весьма компактным и сходу удалось применить его в реальных задачах. Можно использовать всю гибкость Javascript, так как на выходе шаблонизатор его и генерит.

Как пользоваться


1. JS темплейт имеет следующий вид:


<source lang="html">
<UL>
<%for (key in myobj){%>
 <% if (myobj[key]>10){%>
    <LI><%= key%>:<%= myobj[key] %></LI>'
    <%}%>
  <%}%>
</UL>
</source>


2. На HTML странице размещаем код проводящий инициализацию, загрузку темплейтов. Затем загружаем данные (допустим через JSON) и прогоняем их через наш темплейт. Загрузка и компиляция темплейтов проходит в момент инициализации объекта, в последствии можно использовать уже скомпилированный темплейт для отрисовки новых данных.


<source lang="javascript"><script src="jquery.js"></script>
<script language="Javascript" src="gs_jstpl.js"></script>
<script>
var myobj={apple:10,banana:20,orange:30};
var tpl=new gs_tpl("test_jstpl.tpl");

alert(tpl.fetch({myobj:myobj}));
alert(tpl.fetch({myobj:{blue:10,green:20,red:30}}));

       $.ajax({
                type: "POST", 
                url: "test_json.php",
                dataType: "json",
                data: { params: {id:12}},
                success: function(ans){
                        var html = tpl.fetch({myobj:ans});
                        $('#target').html(html);
                }
        });


</script>
  </source>


Исходный код


исходный код (1Kb)

<source lang="javascript">function gs_tpl(filename) {
	this.parse=function() {
		var str='html=\'\';\n';
		var parts=[];
		var tpl=this.tpl;
		var j=i=0;
		var js='';

		do {
			j=tpl.indexOf('<%');
			if(j>=0) {
				str+='html+=\''+addslashes(tpl.substring(0,j))+'\';\n';
				tpl=tpl.substring(j+2);

				i=tpl.indexOf('%>');
				if(i>=0){
					js=tpl.substring(0,i);
					if(js[0]=='=') str+='html+='+js.substring(1)+';\n';
						 else str+=js+'\n';

					tpl=tpl.substring(i+2);
				}
			}
		}while(j>=0);

		str+='html+=\''+addslashes(tpl)+'\';\n';

		this.html=str;
	}
	this.fetch=function(data){
		for(key in data) self[key]=data[key];
		return eval(this.html);
	}
	this.load=function(filename){
		$.ajax({
			type: "GET",
			url: filename,
			dataType: "html",
			async: false,
			success: function(ans){
				this.tpl=ans;
				this.parse();
			}.bind(this)
		});

	}
	this.html='';
	this.filename=filename;
	this.load(filename);
}
</source>


Пример


Демка


0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.