Mootools template engine 1

Když vytváříte v javascriptu složité html struktury, hodil by se nějaký template engine. Takový šablonovací systém pro javascript. Něco jako smarty v javascriptu. Trochu to zlehčuji, ale pro pochopení je to dobrý příklad.


Podobný javascriptový šablonovací systém už jsem v minulosti tvořil, ale protože většinu javascriptových věcí už píši v mootools framework, rozhodl jsem se postupně tento šablonovací systém přepsat do mootools.

Bude tady vznikat takový seriál. Pravděpodobně se s dalšími díly seriálu bude mootools template engine hodně měnit a budou přibývat jeho funkce.

První díl se věnuje funkci, která vytvoří z pole hodnot rozbalovací nabídku html select. Bude mít tři parametry, první je vstupní pole, druhé je vybraná hodnota a třetí parametr pole s dalšími vlastnostmi.

Takhle to vypadalo před mootools:

  1. function Template() {
  2. this.createCombo = function(itemsList, value, params) {
  3. var theSEL = document.createElement('SELECT');
  4. if (params) {
  5. if (params.constructor == Array) {
  6. if (params['onChange']) theSEL.onchange = new Function(params['onChange']);
  7. if (params['name']) theSEL.name = params['name'];
  8. if (params['id']) theSEL.id = params['id'];
  9. if (params['className']) theSEL.className = params['className'];
  10. }
  11. }
  12. this.createSelectOptions(theSEL, itemsList, value);
  13. return theSEL;
  14. };
  15. this.createSelectOptions = function(theSEL, itemsList, value) {
  16. for(t in itemsList) {
  17. var theOPT = document.createElement('OPTION');
  18. if (value==t) theOPT.selected = true;
  19. theOPT.innerHTML = itemsList[t];
  20. theOPT.value = t;
  21. theSEL.appendChild(theOPT);
  22. }
  23. };
  24. }
  25. Jednoduše pak v kódu můžeme vytvářet html select podle pole s hodnotami a dalšími porametry.
  26. var prms = new Array;
  27. prms['id'] = "idselectu";
  28. prms['name'] = "nameselectu";
  29. var htmlselect = Template.createCombo(["první option", "druhý option", "třetí a vybraný option"], 2, prms); 

Raději bych se věnoval řešení v mootools, formát vstupních parametrů se změní a vyřeší se některé problémy např. použití for (t in itemsList) pro pole, což není vhodné a může způsobit chyby:

  1. var MooTemplate = {
  2. htmlOptions: function(itemsList, key, params) {
  3. var tSEL = new Element('select', params);
  4. tSEL.adopt(this.__getHtmlOptions(itemsList, key));
  5. return tSEL;
  6. },
  7. __getHtmlOptions: function(itemsList, key) {
  8. var htmloptions=[];
  9. $each(itemsList, function(v, k){
  10. var params={'html':v, 'value':k}
  11. if (key==k) params.selected=true;
  12. htmloptions.push(new Element('option', params));
  13. }, this);
  14. return htmloptions;
  15. }
  16. }
  17. Pokud chci vytvořit select z pole, kde hodnota option je každý klíč pole a je vybrán řádek odpovídající parametru volám jen tuto funkci
  18. MooTemplate.htmlOptions(["první option", "druhý option", "třetí a vybraný option"], 2, {'id':"idselectu", 'name':"nameselectu"});