art-template简单使用
art-template是一款较通用的前端模板引擎。
简单的使用方法如下:
具备3个要素
1)模板
<script type="text/template" id="tpl">
<p>我是一头{{animal}}</p>
</script>
2)引入插件
<script src="./template-web.js"></script>
3)调用插件
var html = template('tpl', {animal:"老虎" });
console.log(html);
------------------------------------------------------------------------------------------------------
关于在模板中填充数据注意点:
这个地方有一点需要注意:如果传入给template第二个参数的是一个没有次级对象的单层级对象,模板中只要包含属性名就好, 如
{animal:"老虎"} => {{animal}}
{animals:{"cat":"老虎", "dog":"狮子"}} => {{animals.cat}} | {{animals.dog}}
------------------------------------------------------------------------------------------------------
集中基础简单的应用:
- 循环
模板中的写法:
{{each target}}
{{$index}} {{$value}}
{{/each}}
传入template的数据的格式
{"target":["aaa","bbb","ccc"]}
或
{"target":{a:"aaa",v:"bbb",c:"ccc"}
- 条件
模板中的写法:
{{if age == "21"}}
....
{{else if age == "23"}}
....
{{/if}}
传入template的数据的格式
{"age":"23"}
- 原文输入(即不将 < > / 等符号进行转码输出)
{{@ data }}
详细信息可看art-template官网 http://aui.github.io/art-template/zh-cn/
art-template简单使用的更多相关文章
- art template前端模板引擎
偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...
- Azure ARM (6) ARM Template简单介绍
<Windows Azure Platform 系列文章目录> Azure ARM (1) 概览 Azure ARM (2) 概览 Azure ARM (3) ...
- art.template 循环里面分组。
后台提供给我们一个数组,我们要用模版实现上面的格式输出怎么版呢? 下面就是解决方案: <h2>循环4个一组</h2> <script type="text/ht ...
- Codeforces Round #313 B. Gerald is into Art(简单题)
B. Gerald is into Art time limit per test 2 seconds memory limit per test 256 megabytes input standa ...
- 利用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"> < ...
- ES6/ES2015的一些特性的简单使
1.一些常用的ES6的特性: let, const, class, extends, super, arrow functions, template string, destructuring, d ...
- js库之art.dialog
自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切 ...
- [转] 在React Native中使用ART
http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...
随机推荐
- Combobox 下拉框赋值
string sql = "select distinct RoleName from tb_Role"; DataTable dt = SqlHelper.DataTable(s ...
- vue遇到的大坑,h5在ios10版本下不能打开页面
无论是谁,在做事情的过程中总是会遇到学坑,才能成为最后的大神 这个坑不说了,找了半天.希望能帮助到你们 进入build文件夹: 找到webpack.prod.conf.js文件: 在UglifyPlu ...
- Java中Json的用法
1. JSONObject json = new JSONObject(); json.put("list", "test"); msg=json.toStri ...
- 【转载】Jmeter分布式部署测试-----远程连接多台电脑做压力性能测试
在使用Jmeter进行接口的性能测试时,由于Jmeter 是JAVA应用,对于CPU和内存的消耗比较大,所以,当需要模拟数以万计的并发用户时,使用单台机器模拟所有的并发用户就有些力不从心,甚至会引起J ...
- PAT_A1118#Birds in Forest
Source: PAT A1118 Birds in Forest (25 分) Description: Some scientists took pictures of thousands of ...
- apicloud 注意事项
页面布局时头部和内容一定要分开,状态栏寖入式要用.可以用api.sendEvent广播出去,api.addlisterten监听. api.openWin打开页面会有黑色闪屏,加bgColor:'#f ...
- 磁盘测试----fio
测试前提 我们在进行测试时,都会分清楚: 测试对象:要区分硬盘.SSD.RAID.SAN.云硬盘等,因为它们有不同的特点 测试指标:IOPS和MBPS(吞吐率),下面会具体阐述 测试工具:Linux下 ...
- LA 3938
After doing Ray a great favor to collect sticks for Ray, Poor Neal becomes very hungry. In return fo ...
- codeforces 244B-Undoubtedly Lucky Numbers 搜索
题意:给你一个n,求不大于n的并且仅由两种或者一种数字组成的数的个数.(有点绕,,简单点就是,看看小于等于n点数中,,有多少数字只有一种数字,或者有两种数字组成) “哎,自己还是太菜了,训练的时候只做 ...
- Linux 中,基础命令 command not found...问题
linux中出现基本命令找不到的问题,经过查找发现是/etc/profile文件出现了问题,解决方案如下: 问题详细: [root@master ~]# ll bash: ls: command no ...