模版引擎—art-template

模板引擎的作用

文档：http://aui.github.io/art-template/zh-cn/

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

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

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

模板渲染

①下载并引入

②创建模版 并给定id值

③与特定数据拼接 并赋值给待传值元素

<script src="js/template-web.js"></script>
  <div id="div"></div>
  <script type="text/html" id="tpl">
     {{data}}
  </script>
  <script> 
  var btn = document.getElementById('div');
   var html = template('tpl',{data: '你好', age:17});
   div.innerHTML = html
  </script>

 

模板语法

输出 {{data}}

原文输出 {{@ value}}

条件判断

{{if 条件}}
<div>条件成立 显示我</div>
{{else}}
<div>条件不成立 显示我</div>
{{/if}}

循环

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

导入模版变量 注意前后顺序 先 引入js文件 --定义函数变量--设置模版变量--导入模版变量--

<div>$imports. dataForm(time)<div>
//dataForm为变量名 template.defaults.imports.变量名 = 变量名

//$imports.变量名称

 function dataform (data){ return data } 
template.defaults.imports.dateFormat = dateFormat;

若变量名 为全局变量（函数也是变量）  可省略 代码

template.defaults.imports.变量名 = 变量名
直接使用：

<div>$imports. dataForm(time)<div>