git.roojs.org Git - roojs1/blob - Roo/Template.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12 /**
  13 * @class Roo.Template
  14 * Represents an HTML fragment template. Templates can be precompiled for greater performance.
  15 * For a list of available format functions, see {@link Roo.util.Format}.<br />
  16 * Usage:
  17 <pre><code>
  18 var t = new Roo.Template(
  19     '&lt;div name="{id}"&gt;',
  20         '&lt;span class="{cls}"&gt;{name:trim} {value:ellipsis(10)}&lt;/span&gt;',
  21     '&lt;/div&gt;'
  22 );
  23 t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
  24 </code></pre>
  25 * 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>.
  26 * @constructor
  27 * @param {String/Array} html The HTML fragment or an array of fragments to join("") or multiple arguments to join("")
  28 */
  29 Roo.Template = function(html){
  30     if(html instanceof Array){
  31         html = html.join("");
  32     }else if(arguments.length > 1){
  33         html = Array.prototype.join.call(arguments, "");
  34     }
  35     /**@private*/
  36     this.html = html;
  37
  38 };
  39 Roo.Template.prototype = {
  40     /**
  41      * Returns an HTML fragment of this template with the specified values applied.
  42      * @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'})
  43      * @return {String} The HTML fragment
  44      */
  45     applyTemplate : function(values){
  46         try {
  47
  48             if(this.compiled){
  49                 return this.compiled(values);
  50             }
  51             var useF = this.disableFormats !== true;
  52             var fm = Roo.util.Format, tpl = this;
  53             var fn = function(m, name, format, args){
  54                 if(format && useF){
  55                     if(format.substr(0, 5) == "this."){
  56                         return tpl.call(format.substr(5), values[name], values);
  57                     }else{
  58                         if(args){
  59                             // quoted values are required for strings in compiled templates,
  60                             // but for non compiled we need to strip them
  61                             // quoted reversed for jsmin
  62                             var re = /^\s*['"](.*)["']\s*$/;
  63                             args = args.split(',');
  64                             for(var i = 0, len = args.length; i < len; i++){
  65                                 args[i] = args[i].replace(re, "$1");
  66                             }
  67                             args = [values[name]].concat(args);
  68                         }else{
  69                             args = [values[name]];
  70                         }
  71                         return fm[format].apply(fm, args);
  72                     }
  73                 }else{
  74                     return values[name] !== undefined ? values[name] : "";
  75                 }
  76             };
  77             return this.html.replace(this.re, fn);
  78         } catch (e) {
  79             Roo.log(e);
  80             throw e;
  81         }
  82
  83     },
  84
  85     /**
  86      * Sets the HTML used as the template and optionally compiles it.
  87      * @param {String} html
  88      * @param {Boolean} compile (optional) True to compile the template (defaults to undefined)
  89      * @return {Roo.Template} this
  90      */
  91     set : function(html, compile){
  92         this.html = html;
  93         this.compiled = null;
  94         if(compile){
  95             this.compile();
  96         }
  97         return this;
  98     },
  99
 100     /**
 101      * True to disable format functions (defaults to false)
 102      * @type Boolean
 103      */
 104     disableFormats : false,
 105
 106     /**
 107     * The regular expression used to match template variables
 108     * @type RegExp
 109     * @property
 110     */
 111     re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
 112
 113     /**
 114      * Compiles the template into an internal function, eliminating the RegEx overhead.
 115      * @return {Roo.Template} this
 116      */
 117     compile : function(){
 118         var fm = Roo.util.Format;
 119         var useF = this.disableFormats !== true;
 120         var sep = Roo.isGecko ? "+" : ",";
 121         var fn = function(m, name, format, args){
 122             if(format && useF){
 123                 args = args ? ',' + args : "";
 124                 if(format.substr(0, 5) != "this."){
 125                     format = "fm." + format + '(';
 126                 }else{
 127                     format = 'this.call("'+ format.substr(5) + '", ';
 128                     args = ", values";
 129                 }
 130             }else{
 131                 args= ''; format = "(values['" + name + "'] == undefined ? '' : ";
 132             }
 133             return "'"+ sep + format + "values['" + name + "']" + args + ")"+sep+"'";
 134         };
 135         var body;
 136         // branched to use + in gecko and [].join() in others
 137         if(Roo.isGecko){
 138             body = "this.compiled = function(values){ return '" +
 139                    this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
 140                     "';};";
 141         }else{
 142             body = ["this.compiled = function(values){ return ['"];
 143             body.push(this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));
 144             body.push("'].join('');};");
 145             body = body.join('');
 146         }
 147         /**
 148          * eval:var:values
 149          * eval:var:fm
 150          */
 151         eval(body);
 152         return this;
 153     },
 154
 155     // private function used to call members
 156     call : function(fnName, value, allValues){
 157         return this[fnName](value, allValues);
 158     },
 159
 160     /**
 161      * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
 162      * @param {String/HTMLElement/Roo.Element} el The context element
 163      * @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'})
 164      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
 165      * @return {HTMLElement/Roo.Element} The new node or Element
 166      */
 167     insertFirst: function(el, values, returnElement){
 168         return this.doInsert('afterBegin', el, values, returnElement);
 169     },
 170
 171     /**
 172      * Applies the supplied values to the template and inserts the new node(s) before el.
 173      * @param {String/HTMLElement/Roo.Element} el The context element
 174      * @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'})
 175      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
 176      * @return {HTMLElement/Roo.Element} The new node or Element
 177      */
 178     insertBefore: function(el, values, returnElement){
 179         return this.doInsert('beforeBegin', el, values, returnElement);
 180     },
 181
 182     /**
 183      * Applies the supplied values to the template and inserts the new node(s) after el.
 184      * @param {String/HTMLElement/Roo.Element} el The context element
 185      * @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'})
 186      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
 187      * @return {HTMLElement/Roo.Element} The new node or Element
 188      */
 189     insertAfter : function(el, values, returnElement){
 190         return this.doInsert('afterEnd', el, values, returnElement);
 191     },
 192
 193     /**
 194      * Applies the supplied values to the template and appends the new node(s) to el.
 195      * @param {String/HTMLElement/Roo.Element} el The context element
 196      * @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'})
 197      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
 198      * @return {HTMLElement/Roo.Element} The new node or Element
 199      */
 200     append : function(el, values, returnElement){
 201         return this.doInsert('beforeEnd', el, values, returnElement);
 202     },
 203
 204     doInsert : function(where, el, values, returnEl){
 205         el = Roo.getDom(el);
 206         var newNode = Roo.DomHelper.insertHtml(where, el, this.applyTemplate(values));
 207         return returnEl ? Roo.get(newNode, true) : newNode;
 208     },
 209
 210     /**
 211      * Applies the supplied values to the template and overwrites the content of el with the new node(s).
 212      * @param {String/HTMLElement/Roo.Element} el The context element
 213      * @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'})
 214      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
 215      * @return {HTMLElement/Roo.Element} The new node or Element
 216      */
 217     overwrite : function(el, values, returnElement){
 218         el = Roo.getDom(el);
 219         el.innerHTML = this.applyTemplate(values);
 220         return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
 221     }
 222 };
 223 /**
 224  * Alias for {@link #applyTemplate}
 225  * @method
 226  */
 227 Roo.Template.prototype.apply = Roo.Template.prototype.applyTemplate;
 228
 229 // backwards compat
 230 Roo.DomHelper.Template = Roo.Template;
 231
 232 /**
 233  * Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.
 234  * @param {String/HTMLElement} el A DOM element or its id
 235  * @returns {Roo.Template} The created template
 236  * @static
 237  */
 238 Roo.Template.from = function(el){
 239     el = Roo.getDom(el);
 240     return new Roo.Template(el.value || el.innerHTML);
 241 };