js 模板引擎 -Art Template
一个例子涵盖所有:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>include demo</title>
<script src="template.js"></script>
</head> <body>
<div id="content"></div>
<div id="tagcontent"></div>
<script id="targettemplate" type="text/html">
<h1><%=title%></h1>
<%include('list')%> //嵌入子模板,id作为标识
<%include('Tvalue')%>
</script>
<script id="list" type="text/html">
<ul>
<%for(var i=0; i<listItems.length; i++){%>
<li>条目内容<%=i+1%> : <%=listItems[i]%></li>
<%}%>
</ul>
</script>
<script id="Tvalue" type="text/html">
<p>不转义:<%==trans%> or <%=#trans%></p>
<p>默认转义: <%=trans%></p>
</script> <script>
var data = {
title: '嵌入子模板',
listItems: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'],
trans:'<label style="color:#F00; font-weight:bold;">hello world!</label>'
};
var logintsorse='<h3>template.compile([id], source)将返回一个渲染函数。其中 id 参数是可选的,'
+'如果使用了 id 参数,可以使用template.render(id, data)渲染模板。</h3>'
+'使用arttemplate来编写:<%=title%>'; var html = template.render('targettemplate', data); var render = template.compile(logintsorse); //编译一段html代码成模板,render(data)把数据render进去
var compilehtml = render(data); document.getElementById('content').innerHTML = html+compilehtml;
</script> <script id="customTag" type="text/html">
<h1><!--[= header]--></h1>
<ul>
<!--[for(var i=0; i<tag.length; i++){]-->
<li>条目内容<!--[=i+1]--> : <!--[=tag[i]]--></li>
<!--[}]-->
</ul>
</script>
<script>
template.openTag = '<!--[';
template.closeTag = ']-->';
var listdata = {
header : 'your study list',
tag : ['算法导论','linq','c#','jquery','django','python']
};
var resulthtml = template.render ('customTag', listdata);
document.getElementById('tagcontent').innerHTML = resulthtml; //
</script>
</body> </html>
js 模板引擎 -Art Template的更多相关文章
- doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
- JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...
- js模板引擎
js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...
- 调研js模板引擎
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- js模板引擎介绍搜集
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- js模板引擎--artTemplate
js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...
- 百度JS模板引擎 baiduTemplate 1.0.6 版
A.baiduTemplate 简介 0.baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎 注:等不及可以直接点左侧导航中的”C.使用举例“,demo即刻试用. 1.应用场景: ...
- 浅析js模板引擎
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- JS模板引擎:基于字符串拼接
目的 编写一个基于字符串拼接的js模板引擎雏形,这里并不会提供任何模板与数据的绑定. 基本原理 Javascript中创建函数的方式有多种,包括: 1. var func = function () ...
随机推荐
- Vue-列表渲染 非变异方法
变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组.相比之下,也有非变异 (non-mutating method) 方法,例如:filter(), concat( ...
- JVM参数说明
转载于https://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html文章 JVM参数说明 -Xms:初始堆大小 默认值=物理内存的1 ...
- [CodeForces - 1225E]Rock Is Push 【dp】【前缀和】
[CodeForces - 1225E]Rock Is Push [dp][前缀和] 标签:题解 codeforces题解 dp 前缀和 题目描述 Time limit 2000 ms Memory ...
- Hibernate 一对一(基于唯一外键的关联)
主表 hbm.xml中 使用<one-to-one> 从表hbm.xml中使用<many-to-one> 并指定unique=true people.hbm.xml: < ...
- extjs6.0 treepanel设置展开和设置选中
var treePanel = { id: "treeUrl", xtype: "treepanel", useArrows: true, // 节点展开+,- ...
- [Java复习] 微服务
1. 怎么样定义一个微服务,或划分服务比较合理?业务导向的共性? 对应服务拆分,先设计高内聚低耦合的领域模型(DD),再实现相应的分布式系统是一种比较合理的方式. 微服务是手段,不是目的.目的是为了让 ...
- CentOS6.8 安装/升级Python2.7.x,并安装最新setuptools、pip、fabric程序总结
最终靠谱的可借鉴文档: 1.python官网 2.http://lovesoo.org/python-fabric-yuan-cheng-zi-dong-bu-shu-jian-jie.html 3. ...
- 0-2马尔可夫过程Markov Processes
在0-1中提到了,当最终output的p=0时,这个时候模型无法正常使用,为了解决这个问题,在0-4中会有所提及. 在本节中,其实,计算概率的时候,我们应该假设某一个位置的词与它前面的所有词都是相关的 ...
- 【CF1256】Codeforces Round #598 (Div. 3) 【思维+贪心+DP】
https://codeforces.com/contest/1256 A:Payment Without Change[思维] 题意:给你a个价值n的物品和b个价值1的物品,问是否存在取物方案使得价 ...
- LUOGU P3759 [TJOI2017]不勤劳的图书管理员(树套树)
传送门 解题思路 和以前做过的一道题有点像,就是区间逆序对之类的问题,用的是\(BIT\)套权值线段树,交换时讨论一下计算答案..跑的不如暴力快.. 代码 #include<iostream&g ...