模板引擎 art-template

模板引擎 art-template

模板引擎的作用

1.使用模板引擎提供的模板语法可以使数据和HTML字符串拼接的更加美观，代码易于维护。

2.模板引擎能够使用户界面的数据拼接和JavaScript业务逻辑分离，增加程序的可扩展性。

3.使用模板引擎可以提高开发效率。

语法

模板渲染

1.下载 art-template 模板引擎

2.引入art-template的js文件

<script src="./js/template-web.js"></script>

3.在script里面编写art-template模板

//在script标签里面写html结构，需要制定type类型
<script type="text/html" id="tpl">
 	<div>
		 <span>{{name}}</span>
		 <span>{{age}}</span>
    </div>
</script>

4.将特定模板与数据进行绑定

//template 方法就是告诉模板引擎，哪个数据需要跟哪个模板进行拼接
const html = template('tpl',{
	name: '张三',
    age: 20
 }); 
//html 就是拼接好的字符串

5.就把拼接好的内容扔到页面的某一个元素内就好

container.innerHTML = html;

原文输出

如果数据中携带HTML标签，默认情况下，模板引擎不会解析标签，会将其转义后原文输出

<h2>{{@ value }}</h2>

条件判断

判断条件都是成对出现，有开始就有结束，例如：

{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

示例demo：当满足条件显示不同的内容

<script type="text/html" id="tpl">
	<div>
		<span>姓名：{{@ name}}</span>
		<span>年龄：{{age}}</span>
	</div>
	{{if age > 18}}
		<div>年龄大于18</div>
	{{else}}
		<div>年龄小于18</div>
	{{/if}}
</script>

循环

{{each target}}
     {{$index}} {{$value}}
 {{/each}}

示例demo：遍历，把数据显示在页面

<script src="js/template-web.js"></script>
    <script type="text/html" id="tpl">
        <ul>
            {{each data}}
            <li>
                <span>姓名：{{$value.name}}</span>
                <span>年龄：{{$value.age}}</span>
            </li>
            {{/each}}
        </ul>
    </script>
<script>
// 这是告诉模板引擎将模板id为tpl的模板和data数据对象进行拼接
var html = template('tpl', {
    data: [{
        name: '张三',
        age: 15
    }, {
        name: '李四',
        age: 20
    }, {
        name: '王五',
        age: 10
    }]
});
document.getElementById('container').innerHTML = html;
</script>

小结：

1.记忆循环的语法 {{each 变量名}}...{{/each}}

2.each 后面跟的是遍历的数据的变量名，需要跟传入进来的值的名一致

3.{{index}} 获取的是索引，{{value}}获取的是数组里面当前的元素

导入模板变量

有的时候需要在模板引擎里面导入其他的一些对象，例如：我们需要在模板里面进行日期的格式化，所以需要进行导入模板变量

语法

//导入
template.defaults.imports.变量名 = 变量值;
//使用
$imports.变量名称  //外部导入的变量以及全局变量

在模板引擎里面进行引入

<div>$imports.dataFormat(time)</div>

在script里面进行导入

function dateFormat（未格式化的原始时间）{
    return '已经格式化好的当前时间'
}
template.defaults.imports.dateFormat = dateFormat;

示例demo:

<div id="container"></div>
<script src="js/template-web.js"></script>
<script type="text/html" id="tpl">
	<div>当前时间是：{{$imports.dateFormat(date)}}</div>
</script>
<script>
	window.onload = function () {
		// 将方法导入到模板中，注意：需要在调用方法之前进行导入
		template.defaults.imports.dateFormat = dateFormat;
		// 这是告诉模板引擎将模板id为tpl的模板和data数据对象进行拼接
		var html = template('tpl', {
			date: new Date()
		});
		document.getElementById('container').innerHTML = html;
		function dateFormat(date) {
			return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
		}
	}
</script>