<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script language="javascript" type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script language="javascript" type="text/javascript">
//框架代码
$(function () {
$("[up-ctl]").each(function (i, item) {
var parent = $(this);
var ctl = parent.attr("up-ctl");
var tar = window[ctl]();//执行用户的ctl方法
//parent.data("_data", tar);//以后可能会用到
var str = parent.html().replace(/##(.+?)##/g, function (e1, e2) {
var res = tar[e2];
if (res == undefined || res == null) {
return e1;
} else {
return res;
}
});
parent.html(str);
parent.find("[up-repeat]").each(function (i, item) {
var repeat = $(this);
var itemAttr = repeat.attr("up-repeat");
for (var i = 0; i < tar[itemAttr].length; i++) {
var repeatStr = repeat.html().replace(/{{(.+?)}}/g, function (e1, e2) {
var res = tar[itemAttr][i][e2];
if (res == undefined || res == null) {
return e1;
} else {
return res;
}
});
repeat.after(repeatStr);
}
repeat.remove();
});
})
});
</script>
<script>
//用户代码
function ctl1() {
var obj = {};
obj.title = "这是一个对象";
obj.items = [];
for (var i = 0; i < 20; i++) {
var item = {};
item.title = "第" + i + "个";
item.index = i;
obj.items.push(item);
}
return obj;
}
</script>
</head>
<body>
<div up-ctl="ctl1">
<h1>##title##</h1>
<ul>
<li up-repeat="items">
{{index}}：{{title}}<br />
</li>
</ul>
</div>
</body>
</html>