基于jquery ui的模板

 

最近工作不怎么忙看啦先jquery ui和exitjs，由感而发写啦个基于jquery的模板隐形，请大家多多指教

 

代码：                                                                                                                                              

(function($){
    var re=/\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g;
    $.widget("ui.template", {
        //模板中要替换的位置
        options:{
            //是否启用自定义格式化函数包
            disableFormats: false,
            //输出格式化定义
            fm:this,
            //是否自动编译
            autoExecute: false,
            compile: false,
            //要编译的模板
            html:'',
            //要替换的模板数据
            data:null
        },
        _create: function(){
            var self=this,options=self.options;
            self.returnElement=this.element;
            if(!this.compiled){
                self.compile();
            }
            self.tempElement=self.applyTemplate(options.data);
        },
        _init: function(){

            var self=this;

            self._execute=false;   //修正时间2010-4-23
            if(this.options.autoExecute){
                this.execute();
            }
        },
        destroy: function(){},
        widget: function() {
       return this.returnElement;
    },
    //设置和获取配置项 
    _setOption: function(key, value){
        var self=this;
        $.Widget.prototype._setOption.apply(self, arguments); 
    },
   
    applyTemplate: function(values){
        var self=this,
                options=self.options,
                userF=self.disableFormats !== true,
                fm=options.fm;
        if(options.compile){
            return self.compiled(values);
      }       
        function fn(m, name, format, args){
            if(format&&userF){
                if (format.substr(0, 5) == "this.") {
                    return self.call(format.substr(5),values[name],values);
                }else if(format.substr(0, 1) == "."){
                    var temp=values[name][format.substr(1)];
                    return temp !==undefined ? temp : "";
                }
                else{
                    if (args) {
                        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);
                }
            }else{
                return values[name] !== undefined ? values[name] : "";
            }
        }
        return options.html.replace(re, fn);
    },
   
    compile: function(){
        var self=this,
                options=this.options,
                useF = options.disableFormats !== true,
                fm=options.fm,
                body;
        function fn(m, name, format, args){
         if(format && useF){
            args = args ? ',' + args : "";
            if(format.substr(0, 1) != "."){
                if(format.substr(0, 5) != "this."){
                    format = "fm." + format + '(';
                }else{
                  format = 'this.call("'+ format.substr(5) + '", ';
                  args = ", values";
                }
            }
         }else{
             args= ''; format = "(values['" + name + "'] == undefined ? '' : ";
         }
         var tmp="";
         if(format.substr(0, 1) == "."){
             tmp="',values['"+name+"']['"+format.substr(1)+"'],'";
         }else{
             tmp="'," + format + "values['" + name + "']" + args + "),'";
         }
         return tmp;
      }
      body = ["this.compiled = function(values){ return ['"];
      body.push(options.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(re, fn));
      body.push("'].join('');};");
      body = body.join('');
      eval(body);
      return self;
    },
    call : function(fnName, value, allValues){
        return this.options[fnName](value, allValues);
    },
    execute: function(){
        var self=this;
        if(!self._execute){
            self.returnElement.html(self.tempElement);
            self._execute=true;
        }
        return self;
    }
    });
    $.extend($.ui.template, {
        version: "1.0"
    });
})(jQuery);

 

 

示例：

 

   js代码：

1. (function($){
2.     var data={
3.           name:'ning cheng zeng',
4.           age:25,
5.           kids:{
6.                 name:'aaaaaaaaaaaa',
7.                 age:1
8.           }
9.     };
10.     var tpl="<p>name:{name} </p><p>age:{age:f} </p><p>kids:name:{kids:.name} </p><p>name:{name:this.aa} </p>";
11.      var format={
12.            f:function(a,b){
13.               return a+":"+(b-5)
14.           }
15.      }
16.     $('h1').template({
17.          html:tpl,
18.          data:data,
19.          fm:format,
20.          autoExecute:false,
21.          compile:true,
22.          aa:function(a){
23.               return a;
24.          }
25.     });
26.    
27. })(jQuery);

   html代码:

    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Templates Example</title>
         <script type="text/javascript" src="../jquery-1.4.2.js"></script>
    <script type="text/javascript" src="../src/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../src/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="../src/Template.js"></script>
    <script type="text/javascript" src="../src/XTemplate.js"></script>
    <script language="javascript" src="templates.js"></script>
</head>
<body>

<h1>Templates</h1>

</body>
</html>

 

最后执行结果为

 

   <h1><p>name:ning cheng zeng </p><p>age:age:20 </p><p>kids:name:aaaaaaaaaaaa </p><p>name:name </p></h1>

 

 

这是小弟根据extjs的模板该写的一个基础的模板 请大家给点意见谢谢；

如有需要等待小弟下次更新

评论

2 楼 s233233464 2010-04-19  

这个是jQuery UI的东西

1 楼 sunwt 2010-04-19  

$.widget 是哪定义的~ 1.3.2没有这个啊~