07-jQuery中的模版引擎

1、安装art-template，下载到本地

添加链接描述

程序员将data值按照选择器挨个渲染页面，频繁操作DOM，非常麻烦

2、使用

//1.在header标签内导入template
//在window全局多了一个函数：template('模版id',需要渲染的数据对象)
<script src="template-web.js"></script>

//定义
<div id="container"></div>
//3、定义模版
<script type="text/html" id="tpl-user">
<h1>{{name}}</h1>
</script>

<script>
//2、定义数据
var data = { name:'zs'}
//4、调用teplate函数，返回处理好的字符串
var htmlStr=template('tpl-user',data)
//5、渲染html
$('#container').html(htmlStr)
</script>

语法

原文输出：
{{@ name}} #解析html字符

条件输出：
{{if flag === 0}}
flag的值是0
{{else if flae ===1}}
flar的值是1
{{/if}}

循环输出：
{{each hobby}} #循环遍历hobby数组
<li>索引是{{$index}}，值是{{$value}}
{{/each}}

例如：

//定义模版
<script type="text/html" id="tpl-user">
<h1>{{@ name}}</h1>
<ul>
    {{ each list}}
    <li>{{$index}}---{{$value}}</li>
    {{/each}}
</ul>
</script>

3、过滤器

{{ value | filterName}}

过滤器语法类似管道操作符，它的上一个输出作为下一个输入
定义过滤器的基本语法如下：

template.defaults.imports.filterName=function(value){}