Git Product home page Git Product logo

juicer's Issues

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

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

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

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

循环会污染外部变量

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"

关于escapehtml优先级的问题

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

{$item|radio:1}

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

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

谢谢

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的错误,同时渲染失败。

编译函数juicer不支持ID?

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

一些优化与建议

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

twice loop problem!

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 list as it,k}',
    '
  • ${it.name} (index: ${k})
  • ',
    '{@/each}',
    '{# first level attribute must specify the "data." prefix}',
    '{@each blah as it}',
    '
  • ',
    'num: ${it.num}
    ',
    '{@if it.num==3}',
    '{@each it.inner as it2}',
    '${it2.time}
    ',
    '{@/each}',
    '{@/if}',
    '
  • ',
    '{@/each}',
    '
'
].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?

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

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

<html>
    {@doLayout}
</html>

子模版:

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

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}

中文字段无法渲染

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

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

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

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

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

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:

<textarea rows="${alt.custom_attr.input_rows}" cols="${alt.custom_attr.input_cols|default,80}" ></textarea>

image

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

doesn't id support custom function?

does anybody know?
Thanks a lot.

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

我有一段模板定义:

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

juicer渲染后变成:

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

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

辅助循环中的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}

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

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

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

if判断boolean类型出错

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

关于循环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}

比如我的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。。。 麻烦告诉一下怎么解决,谢谢了

else if判断的问题

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

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

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

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

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

关于在juicer直接执行函数

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.