yiguanjia
/
php


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
							<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>TemplateJS - 调用模板演示</title>
</head>

<body>


<div id="doc">loading..</div>
<div id="doc2"></div>

<!-- 公用模板引擎 -->
<script src="./mix/build/template.js"></script>

<!-- 建议使用 gruntjs 合并 -->
<script src="./mix/build/index.js"></script>
<script src="./mix/build/copyright.js"></script>
<script src="./mix/build/public/footer.js"></script>
<script src="./mix/build/public/header.js"></script>
<script src="./mix/build/public/logo.js"></script>
<!-- 建议使用 gruntjs 合并 -->

<!-- 使用传统方式 -->
<script id="test-inner" type="text/html">
{{if isAdmin}}
    <h3>{{title}}</h3>
    <ul>
        {{each list}}
            <li>{{$index + 1}}: {{$value}}</li>
        {{/each}}
    </ul>
{{/if}}
</script>
<script>
// 渲染页面中的模板
var data = {
	title: '动态编译',
	isAdmin: true,
	list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template.render('test-inner', data);
document.getElementById('doc2').innerHTML = html;
</script>

<script>
// 使用预编译的方式渲染模板
var data = {
	title: '预编译',
	time: (new Date).toString(),
	list: [
		{
			title: '<油价>调整周期缩至10个工作日 无4%幅度限制',
			url: 'http://finance.qq.com/zt2013/2013yj/index.htm'
		},
		{
			title: '明起汽油价格每吨下调310元 单价回归7元时代',
			url: 'http://finance.qq.com/a/20130326/007060.htm'
		},
		{
			title: '广东副县长疑因抛弃情妇遭6女子围殴 纪检调查',
			url: 'http://news.qq.com/a/20130326/001254.htm'
		},
		{
			title: '湖南27岁副县长回应质疑：父亲已不是领导',
			url: 'http://news.qq.com/a/20130326/000959.htm'
		},
		{
			title: '朝军进入战斗工作状态 称随时准备导弹攻击美国',
			url: 'http://news.qq.com/a/20130326/001307.htm'
		}
	]
};

// 加载index模板
document.getElementById('doc').innerHTML = template('index', data);
</script>
</body>
</html>