使用 template.js 模板引擎渲染动态 HTML

<div id='container'></div>
<!--定义模板-->
<!--将代码按照js语法进行解析-->
<!--需要手动的更改为text/html 按照html语法解析-->
<script type='text/html' id='tpl-user'>
	<h1>{{name}}--{{age}}</h1>
	{{@test}}
<p>//		条件输出
<div>
{{if flag % 2 == 0}}
{{flag}}是偶数
{{else if flag % 2 == 1}}
{{flag}}是奇数
{{/if}}</p>
<pre><code>&lt;/div&gt;
</code></pre>
<p>//			循环输出
<ul>
{{each hobby}}
<li>索引是{{$index}},循环项是{{$value}}</li>
{{/each}}
</ul></p>
<pre><code>&lt;h3&gt;使用过滤器:{{regTime | dateFormat}}&lt;/h3&gt;
</code></pre>
</script>
<script>
//			过滤器函数
	template.defaults.imports.dateFormat = function(date) {
		var y = date.getFullYear()
		var m = date.getMonth() + 1
		var d = date.getDate()
		return y + '-' + m + '-' + d
	}
	
	
	
//			定义数据
	var data = {
		name: 'zjy',
		age: 20,
		test: '<em>测试原文输出</em>',
		flag: 9,
		hobby: ['看书', '学习', '敲代码']
	}
	
	//调用template函数
	var htmlStr = template('tpl-user', data)
	console.log(htmlStr)
	$('#container').html(htmlStr)
	
//			渲染html结构

</script>