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简单使用的更多相关文章

  1. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

  2. Azure ARM (6) ARM Template简单介绍

    <Windows Azure Platform 系列文章目录>      Azure ARM (1) 概览      Azure ARM (2) 概览      Azure ARM (3) ...

  3. art.template 循环里面分组。

    后台提供给我们一个数组,我们要用模版实现上面的格式输出怎么版呢? 下面就是解决方案: <h2>循环4个一组</h2> <script type="text/ht ...

  4. 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 ...

  5. 利用art.template模仿VUE 一次渲染多个模版

    TypeScript代码 import template = require('art-template/lib/template-web'); interface TemplateBindConfi ...

  6. 利用art.template模仿VUE

    首先先看一下Typescript代码: import template = require('art-template/lib/template-web'); interface TemplateBi ...

  7. js 模板引擎 -Art Template

    一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  8. ES6/ES2015的一些特性的简单使

    1.一些常用的ES6的特性: let, const, class, extends, super, arrow functions, template string, destructuring, d ...

  9. js库之art.dialog

    自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切 ...

  10. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

随机推荐

  1. Combobox 下拉框赋值

    string sql = "select distinct RoleName from tb_Role"; DataTable dt = SqlHelper.DataTable(s ...

  2. vue遇到的大坑,h5在ios10版本下不能打开页面

    无论是谁,在做事情的过程中总是会遇到学坑,才能成为最后的大神 这个坑不说了,找了半天.希望能帮助到你们 进入build文件夹: 找到webpack.prod.conf.js文件: 在UglifyPlu ...

  3. Java中Json的用法

    1. JSONObject json = new JSONObject(); json.put("list", "test"); msg=json.toStri ...

  4. 【转载】Jmeter分布式部署测试-----远程连接多台电脑做压力性能测试

    在使用Jmeter进行接口的性能测试时,由于Jmeter 是JAVA应用,对于CPU和内存的消耗比较大,所以,当需要模拟数以万计的并发用户时,使用单台机器模拟所有的并发用户就有些力不从心,甚至会引起J ...

  5. PAT_A1118#Birds in Forest

    Source: PAT A1118 Birds in Forest (25 分) Description: Some scientists took pictures of thousands of ...

  6. apicloud 注意事项

    页面布局时头部和内容一定要分开,状态栏寖入式要用.可以用api.sendEvent广播出去,api.addlisterten监听. api.openWin打开页面会有黑色闪屏,加bgColor:'#f ...

  7. 磁盘测试----fio

    测试前提 我们在进行测试时,都会分清楚: 测试对象:要区分硬盘.SSD.RAID.SAN.云硬盘等,因为它们有不同的特点 测试指标:IOPS和MBPS(吞吐率),下面会具体阐述 测试工具:Linux下 ...

  8. LA 3938

    After doing Ray a great favor to collect sticks for Ray, Poor Neal becomes very hungry. In return fo ...

  9. codeforces 244B-Undoubtedly Lucky Numbers 搜索

    题意:给你一个n,求不大于n的并且仅由两种或者一种数字组成的数的个数.(有点绕,,简单点就是,看看小于等于n点数中,,有多少数字只有一种数字,或者有两种数字组成) “哎,自己还是太菜了,训练的时候只做 ...

  10. Linux 中,基础命令 command not found...问题

    linux中出现基本命令找不到的问题,经过查找发现是/etc/profile文件出现了问题,解决方案如下: 问题详细: [root@master ~]# ll bash: ls: command no ...