art-template常用总结
高性能JavaScript模板引擎原理解析:http://cdc.tencent.com/2012/06/15/%E9%AB%98%E6%80%A7%E8%83%BDjavascript%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/
javascript 模板引擎,官网:https://github.com/aui/art-template
分为原生语法和简洁语法,本文主要是讲简洁语法
- 基础数据渲染
- 输出HTML
- 流程控制
- 遍历
- 调用自定义函数方法
- 子模板引入
基础数据渲染
一、引入art-template.js文件
<script src="template-debug.js"></script>
二、编写HTML模板
<script id="test" type="text/html">
<h1>{{title}}</h1>
</script>
三、向模板插入数据,并输出到页面
var data = {
title:"hello world"
};
var html = template("test",data);
document.getElementById('content').innerHTML = html;
输出HTML
<script id="test" type="text/html">
<h1>{{title}}</h1>
</script>
//注意:{{title}}这是对内容编码输出,应该写成{{#title}}这是对内容不编码输出
<script id="test" type="text/html">
<h1>{{#title}}</h1>
</script> var data = {
title:"<p>hello world</p>"
};
var html = template("test",data);
document.getElementById('content').innerHTML = html;
流程控制语句(if else)
{{if value}}
...
{{else if value}}
...
{{else}}
...
{{/if}}
art-template里面的流程控制就相对其他模板来说强大很多了,直接看例子吧
<script id="test" type="text/html">
<div>
{{if bok==22}}
<h1>线上</h1>
{{else if bok==33}}
<h2>隐藏</h2>
{{else}}
<h3>走这里</h3>
{{/if}}
</div>
</script>
<script>
var data = {
"bok":22
};
var html = template('test',data);
document.getElementById("app").innerHTML = html;
</script>
嵌套的写法
<script id="test" type="text/html">
<div>
{{if bok}}
{{if list.length>=0}}
{{each list}}
<p>{{$index}}:{{$value}}</p>
{{/each}}
{{else}}
<p>没有数据</p>
{{/if}}
{{/if}}
</div>
</script>
<script>
var data = {
"bok":true,
list:["a","b","c"]
};
var html = template('test',data);
document.getElementById("app").innerHTML = html;
</script>
循环遍历语句
{{each name}}
索引:{{$index}}
值:{{$value}}
{{/each}}
<script id="test" type="text/html">
<div>
<ul>
{{if c==100}}
<ul>
{{each person}}
<li>
编号:{{$index+1}}--姓名:{{$value.name}}--年龄:{{$value.age}}
</li>
{{/each}}
</ul>
{{/if}}
</ul>
</div>
</script> <script>
var data = {
c:100,
person:[
{name:"jack",age:18},
{name:"tom",age:19},
{name:"jerry",age:20},
{name:"kid",age:21},
{name:"jade",age:22}
]
};
var html = template("test",data);
document.getElementById("content").innerHTML = html;
</script>
调用自定义方法
通过template.helper(name,fnCallBack)注册方法
可以直接在{{}}中调用
<script id="test" type="text/html">
<div>
{{if c==100}}
<ul>
{{each person}}
<li>姓名:{{$value.name}}--性别:{{show($value.sex)}}</li>
{{/each}}
</ul> {{/if}}
</div>
</script>
<script>
var data = {
c:100,
person:[
{name:"jack",age:18,sex:1},
{name:"tom",age:19,sex:0},
{name:"jerry",age:20,sex:0},
{name:"kid",age:21,sex:1},
{name:"jade",age:22,sex:0}
]
};
//自定义函数
template.helper("show",function(sex){
console.log(sex);//同样可以打印日志到控制台
if(sex==0){
return "男"
}else if(sex==1){
return "女"
}
});
var html = template("test",data);
document.getElementById("app").innerHTML = html;
</script>
调用子模板
{{include 'main'}} 引入子模板,数据默认为共享
{{include 'main' a}} a为制定数据,但是同样必须是父级数据,可以看看下面的例子,如果不注入的a的话,引入的子模板是接受不到数据的
<body>
<div id="app"></div>
<script src="template-debug.js"></script>
<script id="main" type="text/html">
<ul>
{{each list}}
<li>{{$value}}</li>
{{/each}}
</ul>
</script>
<script id="test" type="text/html">
<div>
<ul>
{{each person}}
<li>{{$value.name}}</li>
{{/each}}
</ul>
{{include 'main' a}}
</div>
</script>
<script>
var data = {
person:[
{name:"jack",age:18},
{name:"tom",age:19},
{name:"jerry",age:20},
{name:"kid",age:21},
{name:"jade",age:22}
],
a:{
list:['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
}
};
var html = template("test",data);
document.getElementById("app").innerHTML=html;
</script>
</body>
转载地址:http://www.cnblogs.com/shiyou00/p/6841801.html
art-template常用总结的更多相关文章
- art template前端模板引擎
偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...
- art.template 循环里面分组。
后台提供给我们一个数组,我们要用模版实现上面的格式输出怎么版呢? 下面就是解决方案: <h2>循环4个一组</h2> <script type="text/ht ...
- 利用art.template模仿VUE 一次渲染多个模版
TypeScript代码 import template = require('art-template/lib/template-web'); interface TemplateBindConfi ...
- 利用art.template模仿VUE
首先先看一下Typescript代码: import template = require('art-template/lib/template-web'); interface TemplateBi ...
- js 模板引擎 -Art Template
一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- SpringBoot整合Redis在可视化工具乱码问题,以及常用的api
pom依赖: <parent> <groupId>org.springframework.boot</groupId> <artifactId>spr ...
- vscode开发中绝对让你惊艳的插件!!!(个人在用)
识别模版引擎 1.Apache Velocity :识别Velocity(vm) 2.Art Template Helper:识别artTemplate 点击路径跳转 1.Laravel goto v ...
- ES6/ES2015的一些特性的简单使
1.一些常用的ES6的特性: let, const, class, extends, super, arrow functions, template string, destructuring, d ...
- 【SharePoint学习笔记】第2章 SharePoint Windows PowerShell 指南
快速了解Windows PowerShell 从SharePoint 2010开始支持PowerShell,仍支持stsadm.exe工具: 可以调用.NET对象.COM对象.exe文 ...
- 一分钟上手artTemplate
一分钟上手artTemplate artTemplate是腾讯开源的前端模版引擎.之前做hue二次开发,只接触过用python写的mako模版引擎,所以之前对前端模版引擎了解不是很多. 这次因为pm叫 ...
随机推荐
- C++面试常见问题——07容器和迭代器
容器和迭代器 vector.list.deque #include<iostream> #include<vector> #include<deque> #incl ...
- Inception SQL审核注解
Inception SQL审核注解 1.建表语句 建表语句检查项 表属性的检查项 这个表不存在 对于create table like,会检查like的老表是不是存在. 对于create table ...
- nginx location语法解释
1.没有修饰符 表示:必须以指定模式开始,如: 默认模式 server { server_name baidu.com; location /abc { …… } } htt ...
- x86平台inline hook原理和实现
概念 inline hook是一种通过修改机器码的方式来实现hook的技术. 原理 对于正常执行的程序,它的函数调用流程大概是这样的: 0x1000地址的call指令执行后跳转到0x3000地址处执行 ...
- AS经济Essay写作想拿高分其实并不难!
在ALEVEL经济学这门课中,最难的部分应该属于essay question部分,因为很多题目的问题方式是很多变的,考官对于考生的期望值要求也是非常高的. 很多学生觉得自己清楚题目中的知识点,但是最终 ...
- [题解] LuoguP4609 [FJOI2016]建筑师
传送门 首先对于高度为\(n\)的建筑,他的左边有\(A-1\)个建筑能被看到,右边有\(B-1\)个建筑能被看到,这两者类似,所以先来看左边. 一个建筑将会遮挡住它后面的高度比它矮的建筑,直到一个高 ...
- Spring 框架介绍
Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of Control – I ...
- Git的http与ssh配置
http 进入git bash 直接clone所需项目 通过http方式 eg:git clone http://xxxxxxxxxx/bk_linux_inspect-master.git 会弹出提 ...
- java向python ,text文件动态传参或传值问题完美解决
由于业务需要对python文件进行参数传递,通过下面两个java方法完美解决此问题,我的思路是:首先我要先把上次写的参数删除,第二我要新的参数写到python文件中. 第一个方法解决了删除上次传递的参 ...
- 201903-1 小中大 Java
思路: 中位数就是排序后中间的那个数.如果有偶数个数,就是中间两个数的平均值. 注意,这个平均值可能是整数,可能是小数,如果都是一样的处理,如果输出整数是3.0,而不是3,就有问题.所以需要分开处理. ...