模板引擎基础语法

模板引擎

模板引擎——它可以根据程序员指定的 模板结构 和 数据，自动生成一个完整的HTML页面。

好处：减少了字符串的拼接，复用性高，利于维护。

使用：

//1.下载js文件  template-web.js
//2.导入模板引擎的js文件，同时会在全局挂在一个template函数
<script src="template-web.js"></script>
//3.定义数据
var data = { name: 'zs', age: 20}
//4.定义模板   添加id是为了方便识别调用
<script type="text/html" id="templd">
	<h1>{{name}}    ------    {{age}}</h1>    
</script>
//5.调用模板引擎函数
template(模板id， 数据)，这个方法有返回值，返回的是拼接好的完整的HTML模板字符串
var htmlStr = template('tpl-user', data)
//6.渲染到页面
$('#container').html(htmlStr)

标准语法：art-template 提供了 {{}} 这种语法格式，在 {{}} 内可以进行 变量输出 或 循环数组 等操作，这种 {{}} 语法在 art-template 中被称为标准语法。

​ 在 {{}} 语法中，可以进行 变量 的输出，对象属性的输出，三元表达式输出，逻辑或输出，加减乘除等表达式输出。

原文输出

{{@ value}}
 //如果输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染

条件输出

//如果要实现条件输出，则可以在 {{}} 中使用 if...else if.../if 的方式，进行按需输出
{{if value}} 按需输出的内容 {{/if}}
                       
{{if v1}} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}

循环输出

//如果要实现循环输出，则可以在{{}} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前循环项使用 $value 进行访问
{{each arr}}
{{$index}} {{$vvalue}}
{{/each}}

过滤器 本身就是一个 function 函数

{{value | filterName}}
//过滤器语法类似于 管道操作符 ，它的上一个 输出 作为下一个 输入

定义过滤器的基本语法如下：

template.defaults.imports.filterName = function (value) { return 处理的结果}

案例-格式化时间过滤器

//定义数据
var data = { regTime : new Date()}
//定义处理时间的过滤器
template.defaults.imports.dateFormat = function (date) {
    var y = date.getFullYear()
    var m = date.getmonth() + 1
    var d = date.getDate()
    
    return y + '-' m + '-' + d
}
//在模板引擎中使用过滤器
<script type="text/html" id="tpl-user">
	<h3>{{regTime | dateFormat}}</h3>     
</script>