* For a list of available format functions, see {@link Roo.util.Format}.<br />
* Usage:
<pre><code>
-var t = new Roo.Template(
- '<div name="{id}">',
- '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
- '</div>'
-);
+var t = new Roo.Template({
+ html : '<div name="{id}">' +
+ '<span class="{cls}">{name:trim} {someval:this.myformat}{value:ellipsis(10)}</span>' +
+ '</div>',
+ myformat: function (value, allValues) {
+ return 'XX' + value;
+ }
+});
t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
</code></pre>
-* For more information see this blog post with examples: <a href="http://www.jackslocum.com/yui/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/">DomHelper - Create Elements using DOM, HTML fragments and Templates</a>.
+* For more information see this blog post with examples:
+* <a href="http://www.cnitblog.com/seeyeah/archive/2011/12/30/38728.html/">DomHelper
+ - Create Elements using DOM, HTML fragments and Templates</a>.
* @constructor
-* @param {String/Array} html The HTML fragment or an array of fragments to join("") or multiple arguments to join("")
+* @param {Object} cfg - Configuration object.
*/
-Roo.Template = function(html){
- if(html instanceof Array){
- html = html.join("");
+Roo.Template = function(cfg){
+ // BC!
+ if(cfg instanceof Array){
+ cfg = cfg.join("");
}else if(arguments.length > 1){
- html = Array.prototype.join.call(arguments, "");
+ cfg = Array.prototype.join.call(arguments, "");
+ }
+
+
+ if (typeof(cfg) == 'object') {
+ Roo.apply(this,cfg)
+ } else {
+ // bc
+ this.html = cfg;
+ }
+ if (this.url) {
+ this.load();
}
- /**@private*/
- this.html = html;
};
Roo.Template.prototype = {
+
+ /**
+ * @cfg {Function} onLoad Called after the template has been loaded and complied (usually from a remove source)
+ */
+ onLoad : false,
+
+
+ /**
+ * @cfg {String} url The Url to load the template from. beware if you are loading from a url, the data may not be ready if you use it instantly..
+ * it should be fixed so that template is observable...
+ */
+ url : false,
+ /**
+ * @cfg {String} html The HTML fragment or an array of fragments to join("") or multiple arguments to join("")
+ */
+ html : '',
+
+
+ compiled : false,
+ loaded : false,
/**
* Returns an HTML fragment of this template with the specified values applied.
* @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
* @return {String} The HTML fragment
*/
+
+
+
applyTemplate : function(values){
- if(this.compiled){
- return this.compiled(values);
- }
- var useF = this.disableFormats !== true;
- var fm = Roo.util.Format, tpl = this;
- var fn = function(m, name, format, args){
- if(format && useF){
- if(format.substr(0, 5) == "this."){
- return tpl.call(format.substr(5), values[name], values);
- }else{
- if(args){
- // quoted values are required for strings in compiled templates,
- // but for non compiled we need to strip them
- // quoted reversed for jsmin
- var re = /^\s*['"](.*)["']\s*$/;
- args = args.split(',');
- for(var i = 0, len = args.length; i < len; i++){
- args[i] = args[i].replace(re, "$1");
- }
- args = [values[name]].concat(args);
+ //Roo.log(["applyTemplate", values]);
+ try {
+
+ if(this.compiled){
+ return this.compiled(values);
+ }
+ var useF = this.disableFormats !== true;
+ var fm = Roo.util.Format, tpl = this;
+ var fn = function(m, name, format, args){
+ if(format && useF){
+ if(format.substr(0, 5) == "this."){
+ return tpl.call(format.substr(5), values[name], values);
}else{
- args = [values[name]];
+ if(args){
+ // quoted values are required for strings in compiled templates,
+ // but for non compiled we need to strip them
+ // quoted reversed for jsmin
+ var re = /^\s*['"](.*)["']\s*$/;
+ args = args.split(',');
+ for(var i = 0, len = args.length; i < len; i++){
+ args[i] = args[i].replace(re, "$1");
+ }
+ args = [values[name]].concat(args);
+ }else{
+ args = [values[name]];
+ }
+ return fm[format].apply(fm, args);
}
- return fm[format].apply(fm, args);
+ }else{
+ return values[name] !== undefined ? values[name] : "";
}
- }else{
- return values[name] !== undefined ? values[name] : "";
- }
- };
- return this.html.replace(this.re, fn);
+ };
+ return this.html.replace(this.re, fn);
+ } catch (e) {
+ Roo.log(e);
+ throw e;
+ }
+
},
+ loading : false,
+
+ load : function ()
+ {
+
+ if (this.loading) {
+ return;
+ }
+ var _t = this;
+
+ this.loading = true;
+ this.compiled = false;
+
+ var cx = new Roo.data.Connection();
+ cx.request({
+ url : this.url,
+ method : 'GET',
+ success : function (response) {
+ _t.loading = false;
+ _t.url = false;
+
+ _t.set(response.responseText,true);
+ _t.loaded = true;
+ if (_t.onLoad) {
+ _t.onLoad();
+ }
+ },
+ failure : function(response) {
+ Roo.log("Template failed to load from " + _t.url);
+ _t.loading = false;
+ }
+ });
+ },
+
/**
* Sets the HTML used as the template and optionally compiles it.
* @param {String} html
*/
set : function(html, compile){
this.html = html;
- this.compiled = null;
+ this.compiled = false;
if(compile){
this.compile();
}