首页 > 网络编程 > JavaScript > javascript技巧 > JS模拟Repeater控件

.net JS模拟Repeater控件的实现代码

2013-06-28 16:31:05 作者：

一个模板控件规定了它的模板语法和js api，这是一个repeater控件的JS实现:

功能强大的模板引擎大都需要对模板进行语法解析，会有性能问题。通过把一个大的模板引擎根据不同呈现需求分隔成多个互相独立模板控件，可以降低处理复杂度提供处理性能,可以根据需求灵活组合这些模板控件得到一个可以定制的模板功能库。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312" /> 
<title>JavaScript Repeater控件</title> 
</head> 
<body> 
<div id="crossRate"> 
 
<table width="815" class="table-data"> 
<tr> 
<th>代码</th> 
<th>名称</th> 
<th>最新价</th> 
<th>涨跌额</th> 
<th>涨跌幅</th> 
<th>开盘</th> 
<th>最高</th> 
<th>最低</th> 
<th>昨收</th> 
</tr> 
</table> 
 
<script type="text/template" id="crossRateHeader"> 
<table width="815" class="table-data"> 
<tr> 
<th>代码</th> 
<th>名称</th> 
<th>最新价</th> 
<th>涨跌额</th> 
<th>涨跌幅</th> 
<th>开盘</th> 
<th>最高</th> 
<th>最低</th> 
<th>昨收</th> 
</tr> 
</script> 
<script type="text/template" id="crossRateItem"> 
<tr> 
<td>{$dataRow[1]}</td> 
<td>{$dataRow[2]}</td> 
<td>{$dataRow[5]}</td> 
<td>{$dataRow[17]}</td> 
<td>{$dataRow[18]}</td> 
<td>{$dataRow[4]}</td> 
<td>{$dataRow[6]}</td> 
<td>{$dataRow[7]}</td> 
<td>{$dataRow[3]}</td> 
</tr> 
</script> 
<script type="text/template" id="crossRateFooter"> 
</table> 
</script> 
</div> 
<script> 
//View 
(function(ns){ 
function init(){ 
var container = document.getElementById("crossRate"); 
container.setAttribute("data-headertemplate", document.getElementById("crossRateHeader").text); 
container.setAttribute("data-itemtemplate", document.getElementById("crossRateItem").text); 
container.setAttribute("data-footertemplate", document.getElementById("crossRateFooter").text); 
} 
function render(dt){ 
var container = document.getElementById("crossRate"), 
headerhtml = container.getAttribute("data-headertemplate"), 
rowhtml = container.getAttribute("data-itemtemplate"), 
footerhtml = container.getAttribute("data-footertemplate");

_this.parse = function(dic) { 
var row = this.row, 
dic = dic || this.dic, 
re = /\{\$(\w+)(?:\[(\d+)\])?(?:\|(\w+))?\}/g, 
html; 
html = row.replace(re, function(a, b, c, d) { 
var val; 
if (typeof dic[b] == "undefined"){ 
return b; 
} 
if (dic[b].constructor == Array) { 
val = dic[b][c]; 
} else { 
val = dic[b]; 
} 
if (Repater[d] || window[d]) {//修饰符 
val = (Repater[d] || window[d])(val); 
} 
return val; 
}); 
_this.cache[n++] = html; 
return html; 
};

_this.toHTML = function(args) { 
var cache = _this.cache, 
result; 
_this.cache = []; 
n = 0; 
result = _this.header + cache.join("") + _this.footer; 
for (i in args) { 
if (args.hasOwnProperty(i)) { 
result = result.replace("{$"+i+"}", args[i]); 
} 
} 
return result; 
}; 
} 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

.net JS模拟Repeater控件的实现代码

您可能感兴趣的文章: