插件介绍: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. 1.2 Percona XtraDB Cluster Limitations

    摘要: 出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该 ...

  2. 架构师养成记--22.客户端与服务器端保持连接的解决方案,netty的ReadTimeoutHandler

    概述 保持客户端与服务器端连接的方案常用的有3种 1.长连接,也就是客户端与服务器端一直保持连接,适用于客户端比较少的情况. 2.定时段连接,比如在某一天的凌晨建立连接,适用于对实时性要求不高的情况. ...

  3. 2016级算法期末上机-I.难题·ModricWang's Fight with DDLs III

    1126 ModricWang's Fight with DDLs III 思路 由于题目中已经说明了时间经过了正无穷,因此初始位置是不重要的,并且每条边.每个点的地位是均等的.因此到达每个点的概率就 ...

  4. dubbo SPI设计

    SPI 全称为 Service Provider Interface,是一种服务发现机制.SPI 的本质是将接口实现类的全限定名配置在文件中,并由服务加载器读取配置文件,加载实现类.这样可以在运行时, ...

  5. VS2010一调试就卡死的问题解决方案 (转)

    前几天我的vs2010突然不能调试了.后来找了很多的解决方案都不能解决问题. 1. 删除所有的bin, debug 2. 重建工程. 3. 重新安装Silverlight的开发包. 还是不行. 最后是 ...

  6. docker 日志管理

    高效的监控和日志管理对保持生产系统持续稳定地运行以及排查问题至关重要. 在微服务架构中,由于容器的数量众多以及快速变化的特性使得记录日志和监控变得越来越重要.考虑到容器短暂和不固定的生命周期,当我们需 ...

  7. 天猫消息盒子的CSS实现

    css: body,h2,h3,ul,p{margin:0;padding:0;font-size:12px;} li{list-style: none; } a{text-decoration: n ...

  8. ES5支持的方法

    ES5的支持的方法 concat() 把元素衔接到数组中. every() 测试断言函数是否对每个数组元素都为真 filter() 返回满足断言函数的数组元素 forEach() 为数组的每一个元素调 ...

  9. GitBook入门(用github做出第一本书)——超详细配图说明

    我最近接触到gitbook,发现它支持markdown和git,刚好把我之前在github上的笔记可以生成一本书,于是我就开始着手捣鼓gitbook,一下午的时间就弄的差不多了,说明这个东西还是挺容易 ...

  10. [中英对照]How PCI Works | PCI工作原理

    How PCI Works | PCI工作原理 Your computer's components work together through a bus. Learn about the PCI ...