qui/Widget/Template.xml 文件
/** * 页面模板对象 -- 支持样板代码替换 * 每个样板代码均写到一个XML文件中 * 这样也方便更改 * * 依赖 {QUI.appPath}/Common.js文件 */ $qui.Class('QUI.Page.Template'); /** * 具体的模板操作类 -- 仅仅支持字符串值替换 * @param {} s */ function _Tpl(s){ var s = s || '' ; /** * 模板变量 * @type {} */ var vars = {}; /** * 设置模板变量 * * 模板样式类似于 @{string} 其中'string'可以自定义 * 注册的变量要遵循JS变量命名规范 * * @param {} name * @param {} value */ this.assign = function(name,value){ if (isString(name)){ value = value || '' ; vars[name] = value ; } }; this._compile = function(){ var k ; for(k in vars){ s = s.replace(new RegExp("@{" + k + "}", "g"),vars[k]); } }; /** * 命名为 val 是为了和jquery一致 * @return {} */ this.val = function(){ return s ; }; this.display = function(){ this._compile(); return s ; } } QUI.Page.Template.prototype = { datasource: ( $qui.appPath + 'Widget.Template'.replace(/\./g,'/') + ".xml") , /** * xmlobj的对象,解析数据源的 * @type {} */ list: {} , /** * 解析数据源成XML对象 * @param String datasource */ init: function(datasource){ datasource = datasource || ( this.datasource) ; var tpls = this.list ; $.ajax({ async:false ,type: 'POST' ,url: datasource , dataType : 'xml',timeout:200, success: function(data){ var k = '',v ; $('data widget',data).each(function(){ //这里将.改为- k = $(this).attr('id').replace(/\./g,'-'); v = $(this).text().trim() ; //这个trim在Common.js中定义 tpls[k] = v ; }); } , error: function(){ $qui.alert('Cannot load xml: ' + this.url); } }); } , /** * 根据tpl的id来查找指定的样板字符串 * @param {} id */ get: function(id){ id = (id || 'sese.no').replace(/\./g,'-'); if (this.list.hasOwnProperty(id)){ return new _Tpl(this.list[id]) ; } return null ; } };
qui/Page/Template.js
在QUI.js中添加如下行:
//代码样板对象 -- 加载系统内部的Widget/Template.xml文件 $qui.include('Page.Template'); $qui.tpl = new QUI.Page.Template(); $qui.tpl.init();
在 qui/Widget/Dialog.js 中用到这个模板的代码如下:
/** * 定义对话框对象 */ $qui.Class('QUI.Widget.Dialog'); var tpla = $qui.tpl.get('QUI.Widget.Alert'); tpla.assign('string','小妖'); $qui.alert(tpla.display());
刷新index.html文件可以看到结果
大小: 12.4 KB 查看图片附件
