Vienkārš javascript template dzinējs

[codez]

Radās vajadzība pēc ērta, ātrdarbīga, bet tai pašā laikā vienkārša javascript template dzinēja, kas nodrošinātu ajaxgai aplikācijai ērtu json formā saņemtu datu transformāciju markup-ā.

Pētot izskatīju visus esošos populārākos dzinējus un paraugus un, aizņemoties no viena ideju, uztaisīju template dzinēju kā jQuery pluginu.

Ideja pavisam vienkārša - funkcijai par parametru tiek padots templeita strings un datu objekts. funkcija izveido funkciju, kura sastāv no templeita stringa, kurā nejavascriptiskā daļa ir iewrapota push funkcijā, tādā veidā ģenerējot masīvu, no kura beigās tiek sajoinots strings.

 

Pats plugins:

(function($){
 $.tpl = function(str, data){
   var fn = new Function("obj",
     "var ___p___=[],print=function(){___p___.push.apply(___p___,arguments);}; with(obj){___p___.push('" +
     str
       .replace(/[\r\t\n]/g, " ")
       .split("<?").join("\t")
       .replace(/((^|\?>)[^\t]*)'/g, "$1\r")
       .replace(/\t=(.*?)\?>/g, "',$1,'")
       .split("\t").join("');")
       .split("?>").join("___p___.push('")
       .split("\r").join("\\'")
     + "');}return ___p___.join('');");
   return data ? fn(data) : fn;
 };
})(jQuery);

 

Lietošana:

templeitā js kodu atdalām ar <? kods(); ?>

js mainīgā vērtības izvade <?=variable_name?>

pluginā ir definēta arī print funkcija, tāpēc var izmantot arī šādi <? print(variable); ?>

 

Piemēri:

var s=$.tpl('<div><?=name?></div>',{name:'John'}); //<div>John</div>

//piemērs ar js ciklu templeitā tabulas ģenerēšanai:
var s=$.tpl('\
<table>\
<?for(var i in d){?>\
 <tr>\
   <td><?=d[i].name?></td>\
   <td><?=d[i].age?></td>\
 </tr>\
<?}?>\
</table>\
',
 {d:[
   {name:'John',age:24},
   {name:'Bill',age:27},
   {name:'James',age:31}
 ]}
);
//<table>  <tr>    <td>John</td>    <td>24</td>  </tr>  <tr>    <td>Bill</td>    <td>27</td>  </tr>  <tr>    <td>James</td>    <td>31</td>  </tr></table>

 

 

Templeitā ir pieejami arī globālie mainīgie, bet nav pieejami funkcijas, kurā izsauc $.tpl, lokālie mainīgie.

Ja funkcijai nenodod 2. parametru ar datiem, tad funkcija atgriež uzģenerēto funkciju, kuru var izsaukt, lai aizpildītu templeitu ar datiem.

var fn=$.tpl('<div><?=name?></div>');
var s=fn({name:'John'}); //<div>John</div>
console.info(fn);
//function anonymous(obj) {
//var ___p___=[],print=function(){___p___.push.apply(___p___,arguments);}; with(obj){___p___.push('<div>',name,'</div>');}return ___p___.join('');
//}

Tas var būt noderīgi, ja teiksim vajag bieži vienu templeitu aizpildīt ar jauniem datiem, tad sākumā vienreiz izveidojam fn funkciju un tad atkārtoti izsauc tikai fn funkciju, nevis katru reizi to veido.

Edited July 18, 2011 by codez

[nemec]

Ieliec githubā un pārklāj ar vienību testiem

[daGrevis]

Ieliec githubā un pārklāj ar vienību testiem

 

+1

 

...un iemet šeit linku uz repo.

[daGrevis]

Ir vērts uzmest aci arī Mustache (implentācija JS'am, implentācija PHP).

[Maris-S]

Tomēr pārnesu savu domu, jo īsti nav pa tēmai.

 

Tagad tā ir šeit:

 

http://php.lv/f/topic/19199-kapec-izmantot-template-engines

Edited July 19, 2011 by Maris-S

[indoom]

Man patīk šī

http://api.jquery.com/jquery.tmpl/

Vēl beta gan