<?xml version="1.0" encoding="UTF-8"?>
<data>
	<widget id='QUI.Widget.Alert'>
	<![CDATA[
		<table cellspacing="0" cellpadding="0" width="286" height="88" border="0">
			<tr>
				<td height="47" align="center" valign="middle">@{string}</td>
			</tr>
			<tr>
				<td height="47" align="center" valign="middle">
				<div style="width: 50px; height: 22px;"></div>
				</td>
			</tr>
		</table>
	]]>
	</widget>
	
</data>

?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文件可以看到结果

?