art-template模板引擎

简介

art-template 是一个简约，超快的模板引擎，中文官首页：点击前往.

安装

浏览器访问 http://aui.github.io/art-template/zh-cn/docs/installation.html
找到安装导航栏，找到下载链接，右键下载即可

基本使用

通过传统方式渲染的过程，我们了解到，动态去渲染UI的时候需要大量去拼接字符串，比较的麻烦，而且复用性也不是很好

art-template使用步骤

导入 art-template
- 在window全局，就多了一个函数，叫做 template(‘模板id’，需要渲染的数据对象)
```
<script src="./lib/template-web.js"></script>
```
定义数据
```
var data = { name: 'zs', age: 20}
```
定义模板
- 模板的 HTML 结构，必须定义到 script 标签中，注意：需要把type属性改成 text/html
- 给模板添加一个 id
- 模板里面如果需要使用到传入的数据，利用 {{}} 来实现，例如：{{name}}，那么就会去找我们调用 template() 函数第二个参数里面对应的name属性的值
```
<script type="text/html" id="tpl-user"><h1>{{name}}    ------    {{age}}</h1>
</script>
```
调用 template 函数
- 函数的返回值就是拼接好的模板字符串
```
var htmlStr = template('tpl-user', data)
```

渲染HTML结构

最后我们需要把template返回的模板字符串设置到页面容器中

现在body中添加一个div
<div id="container"></div>
然后渲染
$('#container').html(htmlStr)

标准语法

什么是标准语法

art-template 提供了 {{}} 这种语法格式，在 {{}} 内可以进行 变量输出 或 循环数组 等操作，这种 {{}} 语法在 art-template 中被称为标准语法

输出

在 {{}} 语法中，可以进行变量的输出，对象属性的输出，三元表达式输出，逻辑或输出，加减乘除等表达式输出

原文输出

如果输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染

条件输出

如果要实现条件输出，则可以在 {{}} 中使用 if…else if…/if 的方式，进行按需输出

循环输出

如果要实现循环输出，则可以在{{}} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前循环项使用 $value 进行访问

过滤器

过滤器本质就是一个 function 函数

语法

过滤器语法类似于 管道操作符，它的上一个输出作为下一个输入

定义过滤器的基本语法如下：

template.defaults.imports.filterName= function(value){/* return处理的结果*/}

案例-格式化时间过滤器

定义数据
```
var data = { regTime: new Date() }
```

定义过滤器

// 定义处理时间的过滤器
template.defaults.imports.dateFormat = function (date) {var y = date.getFullYear()var m = date.getMonth() + 1var d = date.getDate()return y + '-' + m + '-' + d
}

在模板引擎中使用过滤器

  <script type="text/html" id="tpl-user"><h3>{{regTime | dateFormat}}</h3></script>

js模板引擎—art-template的使用相关推荐

js模板引擎art template数组渲染的方法
转载:js模板引擎art template数组渲染的方法 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,模板引擎种类也是五花八门,我就说几个安全性高.错误处理调 ...
js模板引擎——art Template
简单介绍 javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃, ...
html jquery 模板引擎,jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
JS模板引擎sychelTemplate
sychelTemplate 简介 0.sychelTemplate希望创造一个用户觉得"简单好用"的JS模板引擎注:等不及可以直接点左侧导航中的"C.使用举例&quo ...
js模板引擎渐进--if/else（7）
有了 each 的经验后,要实现 if/else 这种指令就简单了-------在 case '}' 处对 varcode 进行指令的判断即可. 模板代码: {if data.value==1}&l ...
php yii 模板引擎,模板引擎（Template Engines）
使用模板引擎(Using template engines) 默认情况下,Yii 使用 PHP 作为其默认的模板引擎语言,但是,你可以配置 Yii 以扩展的方式支持其他的渲染引擎, 比如 Twig 或 ...
js模板引擎之handlebars.js
最近在接触郑州知识库,里面使用到的技术是值得自己学习的. 该项目前端使用的是handlebars.js模板引擎框架.模板引擎框架用于数据与结构分离的思想,实现页面动态分离的效果. 1.为什么使用模板引 ...
解决laytpl.js模板引擎插件加载模板后无法获取模板中的元素id等内容
一.问题描述在页面中使用laytpl.js模板引擎,在页面加载后无法使用jquery获取模板中的html元素,以下是图片和代码: 在添加或修改完毕后重新加载页面,不能使用jquery获取模板中的ht ...
js模板引擎渐进--后记
至此,算是完成了一个系列了. 本来是想写的更详细的,但是太详细每次说的东西就少的可怜. 在学习的过程中,每次的改进改动博主都是复制一个新的文件进行,整个有二十多篇,中间有很多小细节的东西,集中在 ea ...
js模板引擎Nunjucks
js模板引擎Nunjucks Nunjucks中文文档

js模板引擎—art-template的使用

相关概念

好处