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 ...
随机推荐
- CorelDRAW图片导出变色,如何解决?
很多小伙伴反映说CDR颜色导出不准确,特别是CorelDRAW X4以及之前的版本,那么CDR导出变色的问题是怎么导致的,如何解决呢,本文小编分享一些自己的心得. 一:出现问题. 比如下面这个问题,明 ...
- Js正则匹配处理时间
<html> <body> <script type="text/javascript"> //将long 型 转换为 日期格式 年-月-日 h ...
- 在Android 上运行 openCV ,并做灰度变化的一个例子
OpenCVImageProcessing1. 导入Opencv的 androrid SDK灰度算法 OpenCVImageProcessing 导入opencv Jar包,配置OpenCVLibra ...
- 【udacity】机器学习-knn最近邻算法
Evernote Export 1.基于实例的学习介绍 不同级别的学习,去除所有的数据点(xi,yi),然后放入一个数据库中,下次直接提取数据 但是这样的实现方法将不能进行泛化,这种方式只能简单的 ...
- 值得收藏--GitHub Top 20 开源项目
参考链接:https://github.com/Aufree/trip-to-iOS/blob/master/Top-100.md 项目名称 项目 ...
- Vue学习之路第二十篇:Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
- 第2章 this 、 call 和 apply
第一部分 基础知识 第2章 this . call 和 apply 2.1 this JavaScript的 this 总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的, ...
- 51nod1183 编辑距离【动态规划】
编辑距离,又称Levenshtein距离(也叫做Edit Distance),是指两个字串之间,由一个转成另一个所需的最少编辑操作次数.许可的编辑操作包括将一个字符替换成另一个字符,插入一个字符,删除 ...
- 【ZOJ 4060】Flippy Sequence
[链接] 我是链接,点我呀:) [题意] [题解] 按照两个区间的排列方式 我们可以分成以下几种情况 会发现这两个区间的作用 最多只能把两段连续不同的区间变为相同. 那么写个for处理出连续不相同的一 ...
- owin--Authentication
下面的这个从httpcontext取出来的GetOwinContext的Authentication认证有很多关于cookie和session的方法,好像不实用owin也能取出来 private IA ...