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>
template 的使用的更多相关文章
- 为.NET Core项目定义Item Template
作为这个星球上最强大的IDE,Visual Studio不仅仅提供了很多原生的特性,更重要的是它是一个可定制的IDE,比如自定义Project Template和Item Template就是一个非常 ...
- jQuery.template.js 简单使用
之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...
- 2000条你应知的WPF小姿势 基础篇<69-73 WPF Freeze机制和Template>
在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师.最为出色的是他维护了两个博客:2,000ThingsYou Should Know About C# 和 2,00 ...
- tornado template
若果使用Tornado进行web开发可能会用到模板功能,页面继承,嵌套... 多页应用模板的处理多半依赖后端(SPA就可以动态加载局部视图),就算是RESTfull的API设计,也不妨碍同时提供部分模 ...
- 设计模式(九): 从醋溜土豆丝和清炒苦瓜中来学习"模板方法模式"(Template Method Pattern)
今天是五.四青年节,祝大家节日快乐.看着今天这标题就有食欲,夏天到了,醋溜土豆丝和清炒苦瓜适合夏天吃,好吃不上火.这两道菜大部分人都应该吃过,特别是醋溜土豆丝,作为“鲁菜”的代表作之一更是为大众所熟知 ...
- C++泛型编程:template模板
泛型编程就是以独立于任何特定类型的方式编写代码,而模板是C++泛型编程的基础. 所谓template,是针对“一个或多个尚未明确的类型”所编写的函数或类. 使用template时,可以显示的或隐示的将 ...
- 新手入门Underscore.js 中文(template)
Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了javaScript的编程.MVC框架Backbone.js就将这个库作为自 ...
- knockoutjs如何动态加载外部的file作为component中的template数据源
玩过knockoutjs的都知道,有一个强大的功能叫做component,而这个component有个牛逼的地方就是拥有自己的viewmodel和template, 比如下面这样: ko.compon ...
- JavaScript模板引擎artTemplate.js——template.helper()方法
上一篇文章我们已经讲到了helper()方法,但是上面的例子只是一个参数的写法,如果是多个参数,写法就另有区别了. <div id="user_info"></d ...
- linux下, 再次遇到使用thinkphp的模板标签时,报错used undefined function \Think\Template\simplexml_load_string() 是因为没有安装 php-xml包
linux下, 使用thinkphp的模板标签,如 eq, gt, volist defined, present , empty等 标签时, 报错: used undefined function ...
随机推荐
- 嵌入式C语言自我修养 05:零长度数组
5.1 什么是零长度数组 顾名思义,零长度数组就是长度为0的数组. ANSI C 标准规定:定义一个数组时,数组的长度必须是一个常数,即数组的长度在编译的时候是确定的.在ANSI C 中定义一个数组的 ...
- 豆瓣电影信息爬取(json)
豆瓣电影信息爬取(json) # a = "hello world" # 字符串数据类型# b = {"name":"python"} # ...
- Hexo博客系列(二)-在多台机器上利用Hexo发布博客
[原文链接]:https://www.tecchen.xyz/blog-hexo-env-02.html 我的个人博客:https://www.tecchen.xyz,博文同步发布到博客园. 由于精力 ...
- php 判断两个时间段是否有交集
一开始,没啥思路,全靠百度,记录一下哈 public function demo(){ //例子 $astart = strtotime("1995-06-16 12:00:00" ...
- (转)MySQL自带的性能压力测试工具mysqlslap详解
mysqlslap 是 Mysql 自带的压力测试工具,可以模拟出大量客户端同时操作数据库的情况,通过结果信息来了解数据库的性能状况 mysqlslap 的一个主要工作场景就是对数据库服务器做基准测试 ...
- 四大组件之Service
1 通过startService 1.1 与调用者相对独立,没有返回,用于播放音乐,下载文件 1.2 如果是调用者自己直接退出而没有调用stopService的话,Service会一直在后台运行.下次 ...
- Cobbler无人值守安装linux系统
简介 Cobbler是一个Linux服务器安装的服务,可以通过网络启动(PXE)的方式来快速安装.重装物理服务器和虚拟机,同时还可以管理DHCP,DNS等. Cobbler可以使用命令行方式管理,也提 ...
- linux下wc功能的简单实现
1.代码来源:自己编写 2.运行环境:linux终端 3.编程语言:c/c++语言 4.bug:未发现 5.当前功能:可以统计字符的字符数.行数.单词数 6.使用方法:wc -l 文件名-->统 ...
- Mysql工作流程分析
Mysql工作流程图 工作流程分析 1. 所有的用户连接请求都先发往连接管理器 2. 连接管理器 (1)一直处于侦听状态 (2)用于侦听用户请求 3. 线程管理器 (1)因为每个用户 ...
- Android四大组件--活动(Activity)
1. 概念 说明: 1). 创建和销毁 onCreate 和 onDestory 应用场景:当界面销毁的时候存储一些数据,在onCreate创建的时候回显数据: 例如:发短信:写短信写到一半,按hom ...