JavaScript中如何使用template插件?
程序员文章站
2022-03-18 15:32:07
...
本章给大家介绍JavaScript中如何使用template插件,了解template插件的使用方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
插件介绍:template 是一个高性能的JavaScript模板引擎。
插件特性:
1、性能卓越,执行速度快(mustache 与 tmpl 的20多倍);
2、支持运行时调试,可精准定位异常模板所在语句;
3、对 NodeJS Express 有很好的支持;
4、安全,默认对输出进行转义;
5、可在浏览器端实现按路径加载模板;
6、支持预编译,可将模板转换成为非常精简的 js 文件;
7、模板语句简介,无需前缀引用数据,拥有简洁版本和原生版本可供选择;
8、支持所有流行的浏览器;
开始使用(有两种语法, 此文章介绍的是简介语法)
1) artTemplate 模板必须使用一个type="text/html" 的 script 标签用来存放模板(标签中写的是HTML);
<script type="text/html"></script>
2) 开始编写自己的模板
<script id="model" type="text/html"> <h1>{{title}}</h1> <ul> {{each list as value index}} <li>{{index+1}}、{{value}}</li> {{/each}} </ul> </script>
3) 使用数据渲染模板
var data ={ title: '热爱的游戏', list: ['LOL','王者农药','梦三国','魔兽争霸','其它'] }; var html = template('model',data); document.getElementById('box').innerHTML = html
artTemplate 简洁语法介绍:
1) 使用之前需要引用简洁语法的版本,例如:
<script src="template.js"></script>
2) 表达式:
{{ 和 }} 符号包裹起来的语句则为模板的表达式。
3) 输出表达式:
对内容编码输出: {{ title }}
对内容不编码输出: {{ #title }}
// 假如有这样一段数据,title 内出现了标签 var data ={ title: '<i>热爱的</i>游戏', list: ['LOL','王者农药','梦三国','魔兽争霸','其它'] }; {{ title }} // 显示内容为:<i>热爱的</i>游戏 {{ #title }} // 显示内容为:热爱的游戏
4) 条件表达式
<script id="model" type="text/html"> <h1>{{ title }}</h1> <ul> // 判断条件自定 {{if list.length>0}} {{each list as value index}} <li>{{index+1}}、{{value}}</li> {{/each}} {{else}} <p>没有内容</p> {{/if}} </ul> </script>
5) 遍历表达式
{{each list as value index}} <li>{{index+1}}、{{value}}</li> {{/each}}// 也可以被简写为 {{each list}} <li>{{$index+1}}、{{$value}}</li> {{/each}}
artTemplate 方法:
template 函数中有两个参数值。
第一个参数表示需要编译的模板(填写的是模板的 ID)
第二个参数是需要向模板填充的数据,返回值是编译之后的HTML字符串;
artTemplate 默认配置
代码示例:
<script id="people" type="text/html"> <h1>{{title}}</h1> <ul> {{if peos.length>0}} {{each peos as p index}} <li> {{index+1}}、 选手姓名:<span>{{p.name}</span>  年龄:<span>{{p.age}}</span> </li> {{/each}} {{else}} <p>没有内容</p> {{/if}} </ul> </script> <script> var data2 ={ title: '喜欢的职业选手', peos: [ { name: "<b>Uzi</b>", age: 20 }, { name: 'Clearlove7', age: 20 }, { name: 'Korol', age: 21 } ] } // 默认为true 不编译 输出为 <b>Uzi</b> // false 编译 是否编码输出 HTML 字符 template.config("escape",false); var html2 = template('people',data2); document.getElementById('box2').innerHTML = html2; </script
以上就是JavaScript中如何使用template插件?的详细内容,更多请关注其它相关文章!
推荐阅读
-
sublime text2编辑器里面的ConvertToUTF8插件具体如何使用??
-
javascript中如何判断对象的数据类型?
-
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试_javascript技巧
-
JavaScript设计模式开发中组合模式的使用教程(高级篇)
-
js如何实现设计模式中的模板方法_javascript技巧
-
yii2中如何使用modal弹窗之基本使用,yii2使用modal弹窗
-
Javascript在IE中总报错――缺少对象!该如何解决
-
asp.net中System.Timers.Timer的使用方法_javascript技巧
-
为什么无法使用php中mysqli的准备语句进行数据库中数据的查询(绑定参数或者绑定结果),项目急用!该如何处理
-
如何使用MySQL查询某个列中相同值的数量统计_MySQL