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. CorelDRAW图片导出变色,如何解决?

    很多小伙伴反映说CDR颜色导出不准确,特别是CorelDRAW X4以及之前的版本,那么CDR导出变色的问题是怎么导致的,如何解决呢,本文小编分享一些自己的心得. 一:出现问题. 比如下面这个问题,明 ...

  2. Js正则匹配处理时间

    <html> <body> <script type="text/javascript"> //将long 型 转换为 日期格式 年-月-日 h ...

  3. 在Android 上运行 openCV ,并做灰度变化的一个例子

    OpenCVImageProcessing1. 导入Opencv的 androrid SDK灰度算法 OpenCVImageProcessing 导入opencv Jar包,配置OpenCVLibra ...

  4. 【udacity】机器学习-knn最近邻算法

    Evernote Export 1.基于实例的学习介绍 不同级别的学习,去除所有的数据点(xi​,yi​),然后放入一个数据库中,下次直接提取数据 但是这样的实现方法将不能进行泛化,这种方式只能简单的 ...

  5. 值得收藏--GitHub Top 20 开源项目

    参考链接:https://github.com/Aufree/trip-to-iOS/blob/master/Top-100.md 项目名称                            项目 ...

  6. Vue学习之路第二十篇:Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  7. 第2章 this 、 call 和 apply

    第一部分 基础知识 第2章  this . call 和 apply 2.1  this JavaScript的 this 总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的, ...

  8. 51nod1183 编辑距离【动态规划】

    编辑距离,又称Levenshtein距离(也叫做Edit Distance),是指两个字串之间,由一个转成另一个所需的最少编辑操作次数.许可的编辑操作包括将一个字符替换成另一个字符,插入一个字符,删除 ...

  9. 【ZOJ 4060】Flippy Sequence

    [链接] 我是链接,点我呀:) [题意] [题解] 按照两个区间的排列方式 我们可以分成以下几种情况 会发现这两个区间的作用 最多只能把两段连续不同的区间变为相同. 那么写个for处理出连续不相同的一 ...

  10. owin--Authentication

    下面的这个从httpcontext取出来的GetOwinContext的Authentication认证有很多关于cookie和session的方法,好像不实用owin也能取出来 private IA ...