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:
- function Template() {
- this.createCombo = function(itemsList, value, params) {
- var theSEL = document.createElement('SELECT');
- if (params) {
- if (params.constructor == Array) {
- if (params['onChange']) theSEL.onchange = new Function(params['onChange']);
- if (params['name']) theSEL.name = params['name'];
- if (params['id']) theSEL.id = params['id'];
- if (params['className']) theSEL.className = params['className'];
- }
- }
- this.createSelectOptions(theSEL, itemsList, value);
- return theSEL;
- };
- this.createSelectOptions = function(theSEL, itemsList, value) {
- for(t in itemsList) {
- var theOPT = document.createElement('OPTION');
- if (value==t) theOPT.selected = true;
- theOPT.innerHTML = itemsList[t];
- theOPT.value = t;
- theSEL.appendChild(theOPT);
- }
- };
- }
- Jednoduše pak v kódu můžeme vytvářet html select podle pole s hodnotami a dalšími porametry.
- var prms = new Array;
- prms['id'] = "idselectu";
- prms['name'] = "nameselectu";
- 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:
- var MooTemplate = {
- htmlOptions: function(itemsList, key, params) {
- var tSEL = new Element('select', params);
- tSEL.adopt(this.__getHtmlOptions(itemsList, key));
- return tSEL;
- },
- __getHtmlOptions: function(itemsList, key) {
- var htmloptions=[];
- $each(itemsList, function(v, k){
- var params={'html':v, 'value':k}
- if (key==k) params.selected=true;
- htmloptions.push(new Element('option', params));
- }, this);
- return htmloptions;
- }
- }
- 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
- MooTemplate.htmlOptions(["první option", "druhý option", "třetí a vybraný option"], 2, {'id':"idselectu", 'name':"nameselectu"});
komentáře
RSS Komentáře
Děkuji za užitečné informace.
Kdyby šlo přidat screenshot, nebo funkční ukázku, aby měl i člověk s menší představivostí rychlý přehled co má před sebou, chrochtil bych blahem. U mnohých vašich článků screenshoty jsou, díky za ně.