插件介绍: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 的使用的更多相关文章

  1. 为.NET Core项目定义Item Template

    作为这个星球上最强大的IDE,Visual Studio不仅仅提供了很多原生的特性,更重要的是它是一个可定制的IDE,比如自定义Project Template和Item Template就是一个非常 ...

  2. jQuery.template.js 简单使用

    之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...

  3. 2000条你应知的WPF小姿势 基础篇<69-73 WPF Freeze机制和Template>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师.最为出色的是他维护了两个博客:2,000ThingsYou Should Know About C# 和 2,00 ...

  4. tornado template

    若果使用Tornado进行web开发可能会用到模板功能,页面继承,嵌套... 多页应用模板的处理多半依赖后端(SPA就可以动态加载局部视图),就算是RESTfull的API设计,也不妨碍同时提供部分模 ...

  5. 设计模式(九): 从醋溜土豆丝和清炒苦瓜中来学习"模板方法模式"(Template Method Pattern)

    今天是五.四青年节,祝大家节日快乐.看着今天这标题就有食欲,夏天到了,醋溜土豆丝和清炒苦瓜适合夏天吃,好吃不上火.这两道菜大部分人都应该吃过,特别是醋溜土豆丝,作为“鲁菜”的代表作之一更是为大众所熟知 ...

  6. C++泛型编程:template模板

    泛型编程就是以独立于任何特定类型的方式编写代码,而模板是C++泛型编程的基础. 所谓template,是针对“一个或多个尚未明确的类型”所编写的函数或类. 使用template时,可以显示的或隐示的将 ...

  7. 新手入门Underscore.js 中文(template)

    Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了javaScript的编程.MVC框架Backbone.js就将这个库作为自 ...

  8. knockoutjs如何动态加载外部的file作为component中的template数据源

    玩过knockoutjs的都知道,有一个强大的功能叫做component,而这个component有个牛逼的地方就是拥有自己的viewmodel和template, 比如下面这样: ko.compon ...

  9. JavaScript模板引擎artTemplate.js——template.helper()方法

    上一篇文章我们已经讲到了helper()方法,但是上面的例子只是一个参数的写法,如果是多个参数,写法就另有区别了. <div id="user_info"></d ...

  10. linux下, 再次遇到使用thinkphp的模板标签时,报错used undefined function \Think\Template\simplexml_load_string() 是因为没有安装 php-xml包

    linux下, 使用thinkphp的模板标签,如 eq, gt, volist defined, present , empty等 标签时, 报错: used undefined function ...

随机推荐

  1. 嵌入式C语言自我修养 05:零长度数组

    5.1 什么是零长度数组 顾名思义,零长度数组就是长度为0的数组. ANSI C 标准规定:定义一个数组时,数组的长度必须是一个常数,即数组的长度在编译的时候是确定的.在ANSI C 中定义一个数组的 ...

  2. 豆瓣电影信息爬取(json)

    豆瓣电影信息爬取(json) # a = "hello world" # 字符串数据类型# b = {"name":"python"} # ...

  3. Hexo博客系列(二)-在多台机器上利用Hexo发布博客

    [原文链接]:https://www.tecchen.xyz/blog-hexo-env-02.html 我的个人博客:https://www.tecchen.xyz,博文同步发布到博客园. 由于精力 ...

  4. php 判断两个时间段是否有交集

    一开始,没啥思路,全靠百度,记录一下哈 public function demo(){ //例子 $astart = strtotime("1995-06-16 12:00:00" ...

  5. (转)MySQL自带的性能压力测试工具mysqlslap详解

    mysqlslap 是 Mysql 自带的压力测试工具,可以模拟出大量客户端同时操作数据库的情况,通过结果信息来了解数据库的性能状况 mysqlslap 的一个主要工作场景就是对数据库服务器做基准测试 ...

  6. 四大组件之Service

    1 通过startService 1.1 与调用者相对独立,没有返回,用于播放音乐,下载文件 1.2 如果是调用者自己直接退出而没有调用stopService的话,Service会一直在后台运行.下次 ...

  7. Cobbler无人值守安装linux系统

    简介 Cobbler是一个Linux服务器安装的服务,可以通过网络启动(PXE)的方式来快速安装.重装物理服务器和虚拟机,同时还可以管理DHCP,DNS等. Cobbler可以使用命令行方式管理,也提 ...

  8. linux下wc功能的简单实现

    1.代码来源:自己编写 2.运行环境:linux终端 3.编程语言:c/c++语言 4.bug:未发现 5.当前功能:可以统计字符的字符数.行数.单词数 6.使用方法:wc -l 文件名-->统 ...

  9. Mysql工作流程分析

    Mysql工作流程图 工作流程分析 1. 所有的用户连接请求都先发往连接管理器 2. 连接管理器    (1)一直处于侦听状态    (2)用于侦听用户请求 3. 线程管理器    (1)因为每个用户 ...

  10. Android四大组件--活动(Activity)

    1. 概念 说明: 1). 创建和销毁 onCreate 和 onDestory 应用场景:当界面销毁的时候存储一些数据,在onCreate创建的时候回显数据: 例如:发短信:写短信写到一半,按hom ...