X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2FDomTemplate.js;h=3ffe06071494d9b7b4b7d78fc4e2adccc61c2b14;hb=0b69a11b1055a6d3a3fd0719bdd58b5a235de0e4;hp=b6cd10a0a0dff25c02e852fd5fef1af0082ce21a;hpb=c36f00eabbb26d1a84929a6159d81b364fa804fb;p=roojs1 diff --git a/Roo/DomTemplate.js b/Roo/DomTemplate.js index b6cd10a0a0..3ffe060714 100644 --- a/Roo/DomTemplate.js +++ b/Roo/DomTemplate.js @@ -27,10 +27,10 @@ * The tpl tag:
- <div roo-for="a_variable or condition.."></tpl>
- <tpl roo-if="a_variable or condition"></tpl>
- <tpl roo-exec="some javascript"></tpl>
- <tpl roo-name="named_template"></tpl>
+ <div roo-for="a_variable or condition.."></div>
+ <div roo-if="a_variable or condition"></div>
+ <div roo-exec="some javascript"></div>
+ <div roo-name="named_template"></div>
*
@@ -38,20 +38,30 @@
Roo.DomTemplate = function()
{
Roo.DomTemplate.superclass.constructor.apply(this, arguments);
- if (this.html) {
+ if (this.html) {
this.compile();
- }
+ }
};
Roo.extend(Roo.DomTemplate, Roo.Template, {
-
+ /**
+ * id counter for sub templates.
+ */
id : 0,
+ /**
+ * flag to indicate if dom parser is inside a pre,
+ * it will strip whitespace if not.
+ */
+ inPre : false,
/**
* The various sub templates
*/
tpls : false,
+
+
+
/**
*
* basic tag replacing syntax
@@ -61,15 +71,23 @@ Roo.extend(Roo.DomTemplate, Roo.Template, {
* x.t:(test,tesT)
*
*/
- re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
-
+ re : /(\{|\%7B)([\w-\.]+)(?:\:([\w\.]*)(?:\(([^)]*?)?\))?)?(\}|\%7D)/g,
+ //re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
iterChild : function (node, method) {
+
+ var oldPre = this.inPre;
+ if (node.tagName == 'PRE') {
+ this.inPre = true;
+ }
for( var i = 0; i < node.childNodes.length; i++) {
method.call(this, node.childNodes[i]);
}
+ this.inPre = oldPre;
},
+
+
/**
* compile the template
*
@@ -81,21 +99,73 @@ Roo.extend(Roo.DomTemplate, Roo.Template, {
var s = this.html;
// covert the html into DOM...
+ var doc = false;
+ var div =false;
+ try {
+ doc = document.implementation.createHTMLDocument("");
+ doc.documentElement.innerHTML = this.html ;
+ div = doc.documentElement;
+ } catch (e) {
+ // old IE... - nasty -- it causes all sorts of issues.. with
+ // images getting pulled from server..
+ div = document.createElement('div');
+ div.innerHTML = this.html;
+ }
+ //doc.documentElement.innerHTML = htmlBody
+
- var div = document.createElement('div');
- div.innerHTML = this.html;
- this.iterChild(div, this.compileNode)
+ this.tpls = [];
+ var _t = this;
+ this.iterChild(div, function(n) {_t.compileNode(n, true); });
+
+ var tpls = this.tpls;
+
+ // create a top level template from the snippet..
+
+ //Roo.log(div.innerHTML);
+
+ var tpl = {
+ uid : 'master',
+ id : this.id++,
+ attr : false,
+ value : false,
+ body : div.innerHTML,
+
+ forCall : false,
+ execCall : false,
+ dom : div,
+ isTop : true
+
+ };
+ tpls.unshift(tpl);
+
+
+ // compile them...
+ this.tpls = [];
+ Roo.each(tpls, function(tp){
+ this.compileTpl(tp);
+ this.tpls[tp.id] = tp;
+ }, this);
+
+ this.master = tpls[0];
+ return this;
},
- compileNode : function(node) {
+ compileNode : function(node, istop) {
// test for
//Roo.log(node);
+
// skip anything not a tag..
if (node.nodeType != 1) {
+ if (node.nodeType == 3 && !this.inPre) {
+ // reduce white space..
+ node.nodeValue = node.nodeValue.replace(/\s+/g, ' ');
+
+ }
return;
}
@@ -108,38 +178,52 @@ Roo.extend(Roo.DomTemplate, Roo.Template, {
forCall : false,
execCall : false,
-
+ dom : false,
+ isTop : istop
};
+
+
switch(true) {
case (node.hasAttribute('roo-for')): tpl.attr = 'for'; break;
case (node.hasAttribute('roo-if')): tpl.attr = 'if'; break;
- case (node.hasAttribute('roo-if')): tpl.attr = 'name'; break;
+ case (node.hasAttribute('roo-name')): tpl.attr = 'name'; break;
case (node.hasAttribute('roo-exec')): tpl.attr = 'exec'; break;
// no default..
}
+
+
if (!tpl.attr) {
// just itterate children..
- this.iterChild(node,this.compileNode)
+ this.iterChild(node,this.compileNode);
return;
}
tpl.uid = this.id++;
- var value = node.getAttribute('roo-' + tpl.attr);
+ tpl.value = node.getAttribute('roo-' + tpl.attr);
node.removeAttribute('roo-'+ tpl.attr);
if (tpl.attr != 'name') {
var placeholder = document.createTextNode('{domtpl' + tpl.uid + '}');
node.parentNode.replaceChild(placeholder, node);
} else {
- node.parentNode.removeChild(node);
+
+ var placeholder = document.createElement('span');
+ placeholder.className = 'roo-tpl-' + tpl.value;
+ node.parentNode.replaceChild(placeholder, node);
}
// parent now sees '{domtplXXXX}
- this.iterChild(node,this.compileNode)
+ this.iterChild(node,this.compileNode);
// we should now have node body...
var div = document.createElement('div');
div.appendChild(node);
+ tpl.dom = node;
+ // this has the unfortunate side effect of converting tagged attributes
+ // eg. href="{...}" into %7C...%7D
+ // this has been fixed by searching for those combo's although it's a bit hacky..
+
+
tpl.body = div.innerHTML;
@@ -147,197 +231,75 @@ Roo.extend(Roo.DomTemplate, Roo.Template, {
tpl.id = tpl.uid;
switch(tpl.attr) {
case 'for' :
- switch (attr.value) {
- case '.': attr.forCall = new Function('values', 'parent', 'with(values){ return values; }'); break;
- case '..': attr.forCall= new Function('values', 'parent', 'with(values){ return parent; }'); break;
- default: attr.forCall= new Function('values', 'parent', 'with(values){ return '+attr.value+'; }');
+ switch (tpl.value) {
+ case '.': tpl.forCall = new Function('values', 'parent', 'with(values){ return values; }'); break;
+ case '..': tpl.forCall= new Function('values', 'parent', 'with(values){ return parent; }'); break;
+ default: tpl.forCall= new Function('values', 'parent', 'with(values){ return '+tpl.value+'; }');
}
break;
case 'exec':
- tpl.execCall = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(attr.value))+'; }');
+ tpl.execCall = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(tpl.value))+'; }');
break;
case 'if':
- tpl.ifCall = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(attr.value))+'; }');
+ tpl.ifCall = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(tpl.value))+'; }');
break;
case 'name':
- tpl.id = value; // replace non characters???
+ tpl.id = tpl.value; // replace non characters???
break;
}
-
- tpls.push({
- id: attr == 'name' ? value : id,
- target: name,
- exec: exec,
- test: fn,
- body: m[1] || ''
- });
+ this.tpls.push(tpl);
},
- oldwrapper : function ()
- {
- s = ['