art-template模板引擎的简单使用

下载

git clone https://github.com/aui/art-template

没安装git的可以直接打开网址下载，下载完后使用lib文件夹下的template.js

文本文档

art-template

简单渲染

HTML代码–script里面的标签的type不能让其解析为js即可， $value和$index代表数组的值和索引

<div class="container">
	<script type="text/html" id="template">
		<h1>
			{{title}}
		</h1>
		<ul>
			{{each books}}
			<li>{{$value}}</li>
			{{/each}}
		</ul>
	</script>
	</div>

JS代码—引入template-web.js将其渲染，第一个参数为上面的id，第二个参数是一个对象，如果得到的数据是一个数组array,则应该传入一个属性使其成为对象,即template(‘template’,{list:array})

<script src="template-web.js" type='text/javascript'></script>
<script>
	window.onload = function(){
		var data = {
            title : '图书信息',
            books:['三国演义','水浒传','西游记','红楼梦']
        };
        var html = template('template',data)
        document.querySelector('.container').innerHTML = html
	}
</script>