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 ...
随机推荐
- Java+selenium+Firefox/ IE/ Chrome主流浏览器自动化环境搭建
一.java+selenium+firefox 1.环境准备:JDK1.8 2.安装firefox浏览器v59 3.下载驱动:https://github.com/mozilla/geckodrive ...
- 【转载】解决方案:git@github.com出现Permission denied (publickey)
遇到的问题 今天心血来潮,想将intellij上的项目代码放到GitHub上管理. 在进行添加远程库的时候,出现了:git@github.com出现Permission denied (publick ...
- 莫烦大大keras学习Mnist识别(4)-----RNN
一.步骤: 导入包以及读取数据 设置参数 数据预处理 构建模型 编译模型 训练以及测试模型 二.代码: 1.导入包以及读取数据 #导入包 import numpy as np np.random.se ...
- 分布式系列文章 —— 从 ACID 到 CAP / BASE
转自:https://mp.weixin.qq.com/s?amp;mid=2652037708&__biz=MzI0NDI0MTgyOA%3D%3D&idx=1&chksm= ...
- 为 Elasticsearch 添加中文分词,对比分词器效果
转自:http://keenwon.com/1404.html 为 Elasticsearch 添加中文分词,对比分词器效果 Posted in 后端 By KeenWon On 2014年12月12 ...
- 1.3 eclipse中配置Tomcat
下载并成功安装Eclipse和Tomcat(): 打开Eclipse,单击“window”菜单,选择下方的“Preferences”: 步骤阅读 3 找到Server下方的Runtime Envi ...
- C#中三种弹出信息窗口的方式
弹出信息框,是浏览器客户端的事件.服务器没有弹出信息框的功能. 方法一: asp.net页面如果需要弹出信息框,则需要在前台页面上注册一个javascript脚本,使用alert方法.使用Client ...
- opencv学习HighGUI图形用户界面初步【1】
HighGUI是图形用户界面模块.包括:1.输入与输出:2.视频捕捉:3.图形和视频的解码编码:4.图形交界面与接口. 由于opencv.hpp包含了core.objdetect.ingproc.ph ...
- 元素类型为 "session-factory" 的内容必须匹配 "(property*,mapping*,(class-cach....解决方法
http://www.cnblogs.com/kisso143/p/3642057.html property必须写在mapping的上面.
- HDU 4359 Easy Tree DP?
Easy Tree DP? Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...