<!VDNDOC "PageBase":"nvo_bill","IniEvent":"ListBill">
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>模板测试</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
		<script src="js/jquery.tmpl.js"></script>
	</head>

	<body>
		------------------嵌入式模板-------------------------
		<div id="div_content">
			<div id="item_data" type="text/x-jquery-tmpl">
				<div style="margin-bottom:10px;color: #007AFF;">
					<span>${ID}</span>
					<span style="margin-left:10px;">${getName(" ")}</span>
					<span>${Remark}</span>
				</div>
			</div>
		</div>
		--------------------------Class-----------------------
		<div class="content">
		</div>
		-----------------------字符串模板-------------------
		<div id="div_strTmpl">
		</div>

		<div id="aaaa">aaaa</div>
	</body>
	<script src="js/vdn.js"></script>
	<script>
		$(document).ready(function() {
			$("#aaaa").each(function(){

				$(this).contents().unwrap().wrap("<li id='" + $(this).prop("id") +"' type='aaa'/>");
			});
			var data = [{
				ID: 'think8848',
				Name: ['Joseph', 'Chan'],
				Remark: "one"
			}, {
				ID: 'aCloud',
				Name: ['Mary', 'Cheung'],
				Remark: "two"
			}];
			//ID 填充
			vdn.appendTo("#div_content", $("#item_data"), data, {
				getName: getName
			});
			//CLASS 填充
			vdn.appendTo(".content", $("#item_data"), data);
			//字符串
			var fmt = "<div><span>${ID}</span><span>${Name}</span></div>";
			vdn.appendTo("div_strTmpl", fmt, data);
		});
		//模板里调用函数
		function getName(spr) {
			return this.data.Name.join(spr);
		}
	</script>

</html>