paulguo / juicer Goto Github PK

View Code? Open in Web Editor NEW

915.0 915.0 263.0 695 KB

A Lightweight JavaScript Template Engine.

Home Page: http://juicer.name

License: MIT License

JavaScript 90.04% CSS 5.23% HTML 4.73%

juicer's Introduction

juicer's People

Contributors

Stargazers

Watchers

Forkers

ilsanbao haibocheng alfredsang nanqiu waterqiang binque mozatkey gourdboy yinhang pifoo cloudscode hustxiaoc asinbow zhang4543 waterforest-pang wuxq zoloadang lovesueee yukiyuki vvgr fhefh2009 javafan007 cmono iallai chu888chu888 jscr sheds xiaobaozi002 steven0lisa webwt shanli tobyreynold yuzhang430 dragonui bananaxzw cohlint tornadory nevergiveup-j wjzheng wangwen1220 jiangzhonghui yhanwen creedbox zwjzxh520 xiao-t johnqing cici7758 udbmnm imhu crabb swimfish09 shaode feskong galaxyshen shenbin1988 karyjan web5 qingdouqianduan wallaceyuan youngclean raymondjiang judasnow mailruzyrain gto999 ckrad kimishaw mtmzorro heicx daowzq michealrui ccys ljw1811 songguang-2010 qqianding xinrui5577 405260701 huangsong howaichun atticusyang cube3power jwang-github userya hcxiong jerryliu610 jackzlz aiwutech yeyuguo stonegithubs dreamxwang summer11 qushuangru inickel chouxiaozi biuyx shinvdu sashamu myoss leeomar nina-wj kikong

juicer's Issues

var data={
list:[
{name:'guokai',show:true},
{name:'benben',show:false},
{name:'dier',show:true}
],
blah:[
{num:1},
{num:2,inner:[
{'time':'15:00'},
{'time':'16:00'}
]},
{num:3,inner:[
{'time':'15:00'},
{'time':'16:00'},
{'time':'16:00'}
]},
{num:4,inner:[
{'time':'15:00'},
{'time':'16:00'},
{'time':'16:00'}
]}
]
};
var tpl=[
'

@each

${it.name} (index: ${k})

@each

',
'num: ${it.num}
',
'{@if it.num==3}',
'{@each it.inner as it2}',
'${it2.time}
',
'{@/each}',
'{@/if}',
'

'
].join('');

console.log(juicer(tpl,data));

output only three items limited by the max number of the second loop,but the first loop have full 4 items?why?

子模板中如何访问父对象的属性

Juicer子模板中如何访问父对象的属性（比如 knockout 中有$parent,$root ）

还是在作子模板的subData中传入父对象？

标签属性被转成小写的问题。

我有一段模板定义：

<script id="resourceConfiguration" type="text/template">
<div id="resourcePropertiesDiv" configurationCode="${_.configurationCode}">
    ......
</div>
</script>

juicer渲染后变成：

<div id="resourcePropertiesDiv" configurationcode="xxx">
    ......
</div>

它把div的configurationCode属性名转成configurationcode小写了？
是我哪里用错了吗，多谢。

callback

fin callback

如何在 node 中@include 一个模板文件

例如这种写法 {@include header.html}
最后会原样输出。

include 在服务器端编程是非常重要的吧 = =#

else if判断的问题

原来在0.5.0版本中，我提过一个issue：if条件判断时不能识别变量，已在0.5.1中修复，但是这次else if出了这个问题：

{@if isOk}
        1
{@else if var1== var2} 
        2
{@/if}

希望IF支持复合语句

比如
{@if val==="a"||val==="b"}
xxxxyyyy
{@/if}

或者
{@if val==="a"&&val==="b"}
xxxxyyyy
{@/if}

：）

有后续版本的详细规划么？

关于<%%>内的注释问题怎么写

<%%>里可以写JS，但是有注释就出错了
双斜杠好像不行

另外请问下 <%%>里如何读取传进去的数据呢

关于循环json 获取不到属性值

遍历json的时候变量的值是空（空字符串）不知道为啥？
var data= {"list":[{name:"A",age:12},{name:"B",age:10},{name:"C",age:14}]}

{@each list as it,index}
${it.name} //这里的值获取不到
{@/each}

自定义模板语法边界符后使用@else时报错

如题，前一段时间在使用juicer时，自定义了模板语法边界，设置为：把{(})都设置成{{(}})后，{{@else}}就报错了~，后来只好改回{。

编译函数juicer不支持ID？

在使用juicer函数进行编译时，不支持ID的方式： var tpl = document.getElementById('tpl').innerHTML ;var compiledTpl = juicer(tpl) ;
这种方式未免太不优雅了吧。BaiduTemplate等模板库都会直接支持ID的方式：var info = baidu.template('list' ,data) ;// list为模板ID，期待后续版本中会加上此特性。

在each中使用自定义函数, 再在其中增加if表达式后提示语法错误

循环会污染外部变量

var html = '{@each array as item} ${item} {@/each} ${item}'
var data = {array: [1,2], item: 'a'}
juicer.to_html(html, data)

输出===> " 1 2 2"

预期应该是 "1 2 a"

当子模板中有循环时，子模板在IE9以上IE浏览器中不能使用

父模板示例：

{@include "#sub1_tpl",list}

子模板示例：
{@each item as it,index}
子模板 //显示不出来
{@/each}

子模板和数据均显示未定义。但在IE7和IE8还有谷歌却是正常的

在Node.js环境里面，添加模版继承的标签

模版继承对于模版而言很重要，希望在服务端能够支持继承语法，比如：
母模版 base.html：

<html>
    {@doLayout}
</html>

子模版：

{@extends 'base.html'}
     <!-- 这里是子模版 -->
{@/extends}

一些优化与建议

现在貌似不支持模板嵌套啊，这个很有用的！还有个人觉得渲染速度方面还有优化空间，可以参考下artTemplate的做法或许可以再提升些渲染速度~~~

foreach bug

var obj = {"proList":prosList,"selPro":defValue};
var proTemp = '{@each proList as item}<li data-value="${item.id}" {@if item.id == selPro}class="sel"{@/if}>${item.prop}{@/each}';

Exception:selPro is not defined

能否在template里面自定义局部变量？

您好，请问，我能在在模板里面定义局部变量吗？情况如下：

js data:
var json = { person:[{ 0 : { name:'test' ...... } ，1 : { name:'text' .......} }] };

template：
{@each person as p,index}
${p[index].name}
请问我能为p[index]定义一个局部变量吗？
{@/each}

怎么样在自定义函数中取得所有的参数？

比如${ } 中间我想将整个对象传递到一个函数中做判断。
可能比整个更复杂的逻辑，我的意思就是有没有办法传递整个data ={} 进去。
function proc_image(data){
if(data.a=1 &&data.b = 3){
return '123';
}else{
return '4,5,6'
}
}

比如我的json里面没有内容，是一个空的数组，我怎么获得这个数组的长度

json代码如下：
var data={ "httop10" : [{"pid":"1", "ftpuser":"tianyi", "domainname":"webabc.com", "starttime":"2013-1-1", "endtime":"2015-1-1", "state":"1"}]};
这个是正常情况下，我可以获得一条结果，但是有的查询条件得到的结果是空的。
var data={ "httop10" : []};
我想在判断如果是空的话，我要显示一句话 “没有查询到结果”，但是没有找到判断这个长度的方法。
{@each httop10 as ht,index}
{@if httop10.length==0} //关键是这句，是不是如果是空的，就不会走each了
没有查询到结果
{@else}
{#这事正常情况下的}
{@/if}
{/each}
起初是认为不走each那里了，我把那一句单独拿到了外面
{@if httop10.length==0}

没有查询到结果 {/if} 这样会输出一个undefined。。。麻烦告诉一下怎么解决，谢谢了

辅助循环中的m,n不能使用变量

辅助循环 {@each i in range(m, n)}中，当m或n用变量就会出错，提示“Juicer Compile Exception: Missing catch or finally after try”
代码：
var seat_data={
desks:[
{type:"VIP席",amount:20},
{type:"普通席",amount:60}
]
}
模板：
{@each desks as desk}
{@each i in range(1,desk.amount)}
${i}
{@/each}
{@/each}

一个优化建议，循环遍历的时候加个类似于last之类的快速定位值

在循环遍历的时候加个last,frist之类的快速定位判断，这样就更加方便了，嘿嘿！
例如：
{@each list as item, index, last}
{@if index===last}
the index is last, the value is ${item.prop}
{@/if}
{@/each}

有方法实现循环打印对象属性和值吗？

var obj = {"name": "joe", "age": 28, "someProp": "some value"};
{@each obj as objKey}
${objKey} -> ${obj[objKey]}
{@/each}
比如像js里：
for(var key in obj) {
console.log(key + " -> " + obj[key]);
}

文档能不能加上索引目录？

juicer很棒，但是每次记不住语法细节，每次都要浏览文档，所以希望文档的目录导航能做的好点。

juicer.name 域名过期了

juicer.name 域名过期了。

if条件判断时不能识别变量

形如下面这部分代码是正确的：

<script src='juicer-min.js' type='text/javascript'></script>
<script id="tpl" type="text/template">
${first} ${second}
{@if first == second }
    ok
{@/if}
</script>


<script>
function test() {
    var tpl = juicer(document.getElementById('tpl').innerHTML);
    var data = {};
    data['first'] = 102;
    data['second'] = 102;
    html = tpl.render(data);
    alert(html);
}
test();
</script>

但是我将模板中这一行${first} ${second}去掉，就会报second is not defined的错误，同时渲染失败。

终于发布新版本了

好感动啊~~~~

chrome插件的CSP中禁用了类似new Function之类的用法，希望提供npm的命令行预编译功能

chrome插件的CSP中禁用了类似new Function之类的用法，如果能提供npm的命令行预编译功能就很爽了

类似handlebars

建议forstart规则中增加对数组运算符的过滤，否则有些嵌套的循环无法使用

//临时修改了一下，

var forstart = juicer.tags.operationOpen + 'each\s_([\w.[]]?)\s_as\s(\w_?)\s_(,\s_\w_?)?' + juicer.tags.operationClose;

//这样就可以使用如下的循环方式了

{@each a as name, i}
{@each b[name] as item, index}
${item.foo}
{@/each}
{@/each}

否则会提示错误：

“Missing catch or finally after try”

如何循环输出一段html，如下的方式

{@each i in range(0, ${deep})}{@/each}

关于核心算法的一些小建议

希望能用词/语法分析理论实现核心算法……
貌似现在是用regular expr做的。
这样可以，但是性能比较低。

很喜欢这个软件……juicer，名字也很好听
加油！

关于模板嵌套，不知道是不是有更好的方案

不知道有没有方案把模板嵌套处理与数据填充分离

打个比方，专门有个对象维护模板的嵌套关系，这部分与数据无关，通过这个对象，可以返回一个合并后的模板。
然后再对模板进行数据填充之类的。

而不是像现在这样，在填充数据的同时处理嵌套，这样好像不是很合理

子模板可以只传模板参数么？

使用中发现， {@include tmpl, data} 如果不传data，是无法显示模板的。

juicer编译异常

问题：juicer编译模板时在firfox14下报如下异常, chrome下正常, 异常信息：Juicer Compile Exception: Illegal operation on WrappedNative prototype object
模板：```
['',
'${name}(${memberIds.length})',
''].join('')

请问，如何在模板里判断数据类型

如题，我要判断是否为Array~~~应该怎么写

可以定义局部变量吗？

或者有什么变通手段吗？

自定义函数能否在模板里作为比较

比如

{@if total | get_page_count >10}
xxxxxxxxxx
{@/if}

关于在juicer直接执行函数

经常会有这个需求，有些数据需要在模版中转换，比如1转成A
String.fromCharCode(${data}+65)或者${String.fromCharCode(data+65)}
我希望直接在模版里面这么用，而不是注册函数，可以吗？

if判断boolean类型出错

在0.5.0版本，若foo.isOk是个boolean，if(foo.isOk==true)这样判断是正确的；
但在0.5.1版本，这样写出错，只能这样if(foo.isOk)才正确。

添加一个定义代码块的功能

虽然juicer支持{@include tpl, data}，但是这个有点不太方便，看看能不能添加一个语法糖：
定义一个代码段

{@tpl 'commonTpl'}
<span>备注</span>
{@/tpl}
调用代码段
{@include 'commonTpl'}

添加了这个语法糖，就可以将模板都放在同一个script标签内了。

发现一个比较严重的问题

此模板编译后变成了
<pre>xxx vvv bbb </pre>

换行没了？

中文字段无法渲染

var obj={名字:'jike'};
var tpl='test juicer${名字}';
juicer(tpl,obj);

result:
Juicer Compile Exception: Cannot read property '0' of null

envrioment: chrome 28,win7
version:0.6.4-stable

run in ie occur exception : Juicer Compile Exception: Unexpected token

Hello,everyone,

I just use juicer to use my custom function,and in ie it occur exception, and in chrome and firfox is well,

my custom function is in below:
function default_value(self_value, default_val){
if(!self_value || self_value == "undefined") {
return default_val;
}
return self_value;

}
juicer.register('default', default_value);

and the template write like:

if I delete the "|default,80", it can run well in ie.

doesn't id support custom function?

does anybody know?
Thanks a lot.

http://juicer.name/ shows pending

I found your blog and silideshare.. but can open your documents: http://juicer.name/
Is your site down?

关于escapehtml优先级的问题

一般的escapehtml作为安全策略，但是大部分情况下使用模板是希望返回html的，例如：

{$item|radio:1}

希望快速的拼接一个radio标签，而且框架的tag功能非常好，完全可以解决过滤功能，例如：
{$username|escape}

似乎修改interpolateOpen， noneencodeOpen 不能解决问题，希望给点指点。

谢谢

不知道有没有办法只渲染部分页面~~

打个比方 juicer(tpl,data,'#dom_Id_or_Classname')
然后指定DOM节点的HTML