template 的使用

 

插件介绍：template 是一个高性能的JavaScript模板引擎。

 

插件特性：

　　1、性能卓越，执行速度快（mustache 与 tmpl 的20多倍）；

　　2、支持运行时调试，可精准定位异常模板所在语句；

　　3、对 NodeJS Express 有很好的支持；

　　4、安全，默认对输出进行转义；

　　5、可在浏览器端实现按路径加载模板；

　　6、支持预编译，可将模板转换成为非常精简的 js 文件；

　　7、模板语句简介，无需前缀引用数据，拥有简洁版本和原生版本可供选择；

　　8、支持所有流行的浏览器；

 

开始使用（有两种语法， 此文章介绍的是简介语法）

　　1） artTemplate 模板必须使用一个type="text/html" 的 script 标签用来存放模板（标签中写的是HTML）；

 

　　2） 开始编写自己的模板

 

　　3） 使用数据渲染模板

 var data ={
     title: '热爱的游戏',
     list: ['LOL','王者农药','梦三国','魔兽争霸','其它']
 };

 var html = template('model',data);
 document.getElementById('box').innerHTML = html

 

到了这一步，打开页面就可以看到效果了。

 

artTemplate 简洁语法介绍：

1） 使用之前需要引用简洁语法的版本，例如：

2） 表达式：

　　{{ 和 }} 符号包裹起来的语句则为模板的表达式。

3） 输出表达式：

　　对内容编码输出： {{ title }}

　　对内容不编码输出： {{ #title }}

　　区别：

 // 假如有这样一段数据，title 内出现了标签 
 var data ={
      title: '热爱的游戏',
      list: ['LOL','王者农药','梦三国','魔兽争霸','其它']
 };

 {{ title }}  // 显示内容为：热爱的游戏

 {{ #title }} // 显示内容为：热爱的游戏

 

4） 条件表达式

 

5） 遍历表达式

{{each list as value index}}
    
{{index+1}}、{{value}}
{{/each}}

// 也可以被简写为

{{each list}}
    
{{$index+1}}、{{$value}}
{{/each}}

 

artTemplate 方法：

　　template 函数中有两个参数值。

　　第一个参数表示需要编译的模板（填写的是模板的 ID）

　　第二个参数是需要向模板填充的数据，返回值是编译之后的HTML字符串；

　　// 目前了解到此处

 

artTemplate 默认配置

 

示例：

 

 

 

转载于:https://www.cnblogs.com/wyhlightstar/p/7117856.html