aui / art-template Goto Github PK
View Code? Open in Web Editor NEWHigh performance JavaScript templating engine
Home Page: https://aui.github.io/art-template/
License: MIT License
High performance JavaScript templating engine
Home Page: https://aui.github.io/art-template/
License: MIT License
有些项目比较通用的模板都放在JS变量里,所以不能用默认提供的<%include(id, [data])%>,希望提供类似dot的子模板机制。
在跨域环境中,使用Script标签动态加载template.js文件,会出现找不到template对象。
因为实际项目中某些ajax请求返回的data中某些key值是null或不存在的,我基本都是用:<% if(title) { %><%=title%><% } %>。
有没有简单的方法,比如类似freemark中的“!”,例:<%= title! %>或
<%= title??default("")%>。
谢谢。
最近在用 感觉很好 但是遇到一个问题 数组嵌套的时候应该模板应该怎样写?
比如像这样 文档里面好像没有
[{name:'v',datalist:[{name:'xy'},{name:'tv'}]},{}];
谢谢
提示如下:Uncaught SyntaxError: Unexpected token <
template不能用
如题
请问如何用artTemplate实现下列将复杂的结构拆分成几个小的子模块呢?
//code
var data = {
"company": "Apple",
"address": {
"street": "1 Infinite Loop Cupertino
",
"city": "California ",
"state": "CA ",
"zip": "95014 "
},
"product": ["Macbook ","iPhone ","iPod ","iPad "]
}
var tpl = "<h1>{{company}}</h1> <ul>{{>address}}</ul>"
var partials = {address: "{{#address}}<li>{{street}}</li><li>{{city}}</li><li>{{state}}</li><li>{{zip}}</li>{{/address}}"}
var html = Mustache.render(tpl, data, partials);
$('#contaner').html(html);
往常语言中的惯例都是 foreach($array as $k $v)这样子,artTemplate中把这个顺序解析成了as $v $k,个人感觉不如按往常的惯例来的好。
本人在项目里面同时使用到underscore
和artTemplate
,控制台报错如下:
seajs.use(['$', 'underscore', '/test/arttemplate'], function ($, _, template) {
// underscore
tplData = [
{
name: "张三",
content: "是好人",
date: "2013-12-30"
},
{
name: "李四",
content: "是坏人",
date: "2013-12-31"
}
];
// 如果把这句注释掉,artTemplate就可以正常运行了
$("body").html(_.template($("#tplItem").html(), tplData));
// arttemplate
var data = {
title: '基本例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template.render('test', data);
document.body.innerHTML = html;
});
请问这是由于underscore
和artTemplate
冲突造成的么?
<% 的标签是jsp写java代码的开始,导致冲突。能否换一个呢?或者有什么解决方案?
如题,现在项目使用grunt
构建的,貌似如果支持nodejs
下面的静态化就更好了。
项目中用了artTemplate,感觉不错
但是,有个大列表渲染,客户反映ie下很慢,随后用ie789测试,即便是9,速度也和chrome差距很大。现在普通用户,用ie的还是很多的,糖糖有空优化下ie下的渲染速度呗!
新需求,实现单页多模块应用,所以想把各模块模版放入各自单独的文件中,比如
<script id="template_a" type="text/html" src="js/block/A.js"/> <script id="template_b" type="text/html" src="js/block/B.js"/> 是否可以实现模版读取出src中的文件内容,而不是script标签中间的内容? 谢谢稳定版本打一下tags吧,1.3.0貌似不能用了,配套文档也没有及时更新
比如requirejs的text插件载入的模板
根据页面id获取模板感觉好蠢 让用户自己用选择器搞定 把dom传进接口会好一点吧
话说好几个月没更新了 已经弃坑了么。。
问题代码在combine.html 131行
.replace(//*(.|\n)?_/|//[^\n]\n|//[^\n]_$|/g, '')
"http://"会被当成行注释过滤掉
模板是这样子的
<td><%=list[i]['jd']></td>
输出成这样
<td>=list[i]['jd']></td>
如题,helper
目前可以去prototype
拿到,但是缓存后的模板函数想要操作就么办法了!Handlebars
处理方式是把helper
注册到了Handlebars.helpers
属性上,子模板partial
注册到了partials
属性上,便于后期进行个别处理!
正在试用artTemplate,增加辅助方法
调用:
template.helper('$toDate', function (content) {
return content;
});
var html = template.render('category_t', data);
$("#Items").html(html);
模版:
<%= $toDate(list[i].update_time)%>
输出:
{Template Error}
接回复错主题的问题,我的模板是这样写的
<% for (var p in json) { %>
<% for (var j=0,len=json[p].length; j < len; j++) { %>
264行报的line1,错误也报错了。 如果模版被压缩成一行字符串不好定位行号时,应该提供出错字段名。 跟这耗了快1小时,几百行的模版字符串二分法排错。
发生的情况是:我用了语法扩展,在模板里用了include,并且传入了data。模板片段如下:
{each list as row index}
{include 'img_tmp' {list:row}}
{/each}
编译出的代码里面相关的一行是:
$out+=' include \'img_list\' ';
$out+=$escape($string(data:row));
$out+=' ';
于是出现了语法错误。我猜想是语法扩展把{list:row}
中的大括号给转成其他的东西了。如果不写{list:row}
而直接写row
则编译的模板没有语法错误,但是嵌入的模板就获取不到数据了。
我不清楚是我用的不对还是一个bug。文档中没有关于include带data时的写法,是不是也应该补个例子?
2013-09-06 更新
上一版本的分析器包含两个BUG,导致模板逻辑语法中出现地雷:
"\""
或者 '\''
$0
以下是新的解析器实现,完善字符串与数字判断的正则,解决上述两个BUG:
// 静态分析模板变量
var KEYWORDS =
// 关键字
'break,case,catch,continue,debugger,default,delete,do,else,false'
+ ',finally,for,function,if,in,instanceof,new,null,return,switch,this'
+ ',throw,true,try,typeof,var,void,while,with'
// 保留字
+ ',abstract,boolean,byte,char,class,const,double,enum,export,extends'
+ ',final,float,goto,implements,import,int,interface,long,native'
+ ',package,private,protected,public,short,static,super,synchronized'
+ ',throws,transient,volatile'
// ECMA 5 - use strict
+ ',arguments,let,yield'
+ ',undefined';
var REMOVE_RE = /\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|[\s\t\n]*\.[\s\t\n]*[$\w\.]+/g;
var SPLIT_RE = /[^\w$]+/g;
var KEYWORDS_RE = new RegExp(["\\b" + KEYWORDS.replace(/,/g, '\\b|\\b') + "\\b"].join('|'), 'g');
var NUMBER_RE = /^\d[^,]*|,\d[^,]*/g;
var BOUNDARY_RE = /^,+|,+$/g;
var getVariable = function (code) {
code = code
.replace(REMOVE_RE, '')
.replace(SPLIT_RE, ',')
.replace(KEYWORDS_RE, '')
.replace(NUMBER_RE, '')
.replace(BOUNDARY_RE, '');
code = code ? code.split(/,+/) : [];
return code;
};
测试代码:
// test
var test = function () {
/*tang bin*/
// hello
var $1, $1$, a$0, a$$, a0;
var str = c$0 + 'fdsf\'hello';//word
var $ = 7;
var x = {};
x.toString();
var _me; _2, _;
var $test = _2 > 399 || _3 < -235;
return false;
}.toString();
console.log(getVariable(test))
算法采用过滤的思路实现:
经过四轮过滤后,剩下来的就是模板变量列表了,且不会有漏网之鱼,从而避免编译后的函数出现未定义的变量。当然,出于使用场景考虑,忽略了下面的两个问题:
关于第2点,有个现实的问题是是:要完美区分正则与除法在不使用语法分析的情况下是无法实现的,引入 ast 成本过大。
最后,默念一遍:没有完美的方案,只有最适合的方案。如有问题欢迎提出
通过template.render('xxx');得到得html带有"" 双引号.这个能否去掉.
artTemplate 有没有像Backbone的templete一样 有数据格式化的例如 fomatDate,格式化日期的
请问,这算是安全漏洞吗?
有的搜索引擎也会报错了,不知道其它搜索引擎怎么处理。
[ReferenceError: template is not defined]
需要对src/tempate-syntax.js简单修改下
1.模版只能写在JavaScript标签里面吗,如果模版数据比较大呢,能不能从文件加载?
2.如果能从文件加载,那文件的格式会是什么呢(这个貌似不重要),模版里面支持CSS和JS吗?
3.模版可以缓存吗,如果模版从文件加载总不能每次都从后台重新加载模版
Tip:ejs可以从文件加载,格式为.ejs,但是不知道模版里面是否支持CSS和JS
kissy的模版挺强大,不过貌似也不支持从文件加载模版
render('template-name', {})
当template-name本身不存在的时候会报错
而一般jquery选择元素,当不存在时并不报错
我要遍历一个对象。而不是数组。
{{each data as value key}}
{{ key }}
{{ value.value }}
{{ value.remark }}
{{/each}}
很多jquery 组件都是在$下面扩展的,这个方法要怎么定义呢?
然后我发现连我有个例子new Date()都不可以用!
抛出的错误
Date is not a constructor
例子如下:
F.Date(new Date(xTime),"YYYY")
form:radiobuttons path="level.id"
需求是无限层级的列表功能,数据是一层嵌套一层
但是突然想不到怎么在模板里实现递归操作
编译后的代码也不知道怎么编译
有什么比较好的实现方案么?
类似EJS的文件加载,希望能够以文件片段的方式管理
模板是否支持extends,而非include
本不想再提了,但这个bug很明显。例如<img src="http://xxx" /> http后边处理错误。通过compile.cmd编译后出的问题,应该是正则处理错误。。
// 提取模板中的变量名
function getKey (code) {
code = getVariable(code);
// 分词
forEach(code, function (name) {
// 除重
if (!uniq.hasOwnProperty(name)&&name.length>0) {
//add by hongfa.yy &&name.length>0
setValue(name);
uniq[name] = true;
}
});
}
例如:
<%shanks.each([1,2,3],function(index,item){%>
结束时间:<%=data.endTime%>
<%});%>只有类似这种形式才会出问题,整个方法的{}被断开的时候。
<%shanks.each([1,2,3],function(index,item){}%>这样的形式是不会出问题。
以上情况出现错误只在i9100上面。
如下模板:
今日预测 <%= data_today.forecast.new %> <%= data_today.forecast.active %> <%= data_today.forecast.rate %> <%= data_today.forecast.start %> <%= data_today.forecast.aver %>如题,更新到最新版报错,看了下发现是template的时候没有传入id,文档也没有说明,囧~
如果把多个html模版,用编译工具打包成JS文件,每个文件里都有
var helpers = { "$escapeHTML": function(){},"$getValue":function(){} },
这个有必要么?是不是可以再优化下
因为有些CMS静态页面,内容又很多,不太合适分开写
需求如下所示:
// ArtTemplate compareZero
ArtTemplate.helper('compareZero', function (range) {
var cnt;
if(range > 0) {
cnt = '<span class="red">' + range + '</span>';
} else if(range < 0) {
cnt = '<span class="green">' + range + '</span>';
} else {
cnt = range;
}
return cnt;
});
提一个feature
模板的语法与JSP的标记冲突,有没有简单的办法重新设定这些标记:<% %>,<%= %>
现在artTemplate模板是通过ID来读取html中script标签中的内容获取模板字符串,在nodejs环境下,建议添加本地模板文件的读取支持!
之前用v1.4,现在升级到v2.0,之前正常的,现在直接显示{Template Error},会是什么可能性?谢谢
[name]:
Render Error
[message]:
No Template template.js:185
exports.onerror
GCC 高级模式下,需要用 obj[propertyName] 取缔 obj.propertyName 去暴露接口
代码中,需要调用 _helpers 的接口,都需要带上引号,如 _helpers.$each --> _helpers['$each']
{
$include: template.reander,
$...
}
-->
{
'$include': template.render,
'$...'
}
但在 compile 的 string 中,$helpers.$include(...) 则可不需要修改
如题
首先赞一下artTemplate对错误捕捉的支持,巧妙的插入一个line变量来记录错误位置。但是担心如果模板中也有$line变量会怎么样?这个我接下来验证下。
update:看了下其它issue,这个别人已经提出过了。但是这里我觉得可以考虑是否支持这样用。
另,着重看下面的$line变量污染错误信息的问题。
-----------------------------------------------问题开始------------------------------------------------------
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>debug-demo</title>
<script src="../template.js"></script>
</head>
<body>
<h1>错误捕获(请打开控制台)</h1>
<script type="text/javascript">
var counter = 10;
</script>
<script id="test" type="text/html">
<ul>
<% for (var i = 0; i < window.counter; i ++) { %>
hello <%= i %> <br/>
<% } %>
</ul>
</script>
<script>
var html = '';
html = template.render('test', {});
document.write(html);
</script>
</body>
</html>
for
语句中有对window下的全局变量counter的引用,感觉应该是支持这样用的吧,但是运行后报错:
...
[message]:
Cannot read property 'counter' of undefined
...
显然把window当成一个变量来处理了。
不知道这里是怎么考虑的?
当使用自定义简洁语法时,对JS语句的支持就不怎么好了。
我现在是稍微修改,以支持{{! var a = 1 }} 这样来支持的
case 'include':
code = 'include(' + split.join(',') + ');';
break;
case '!':
code = args;
break;
default:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.