让Mustache⽀持简单的IF语句
Mustache是⼀种Logic-less templates.不⽀持if这类条件判断是Logic-less的显著特征之⼀.Mustache的另⼀个特征是体积⼩,不依赖其他前端类库,在浏览器端和NodeJS中都可以运⾏.
并⾮Logic-less.Mustache的体积⼩,⽆依赖,前后兼容才是我们当前的项⽬选择这套模板系统的真正原因.没有IF有时候感觉并不给⼒,所以就想办法简单扩展下Mustache,让其具有⼀些通⽤的条件判断能⼒.绯闻女孩布莱尔
⽐如如下的应⽤场景,我们需要根据某⼀字段的值,决定输出有意义的中⽂,并⽤颜⾊加以修饰.にんじゃりばんばん
status=="P" ==> <b >通过</b>sugar是什么意思
tdd
status=="W" ==> 等待
status=="R" ==> <b >拒绝</b>
Logic-less模板实现这个功能就需要在数据上下功夫,如下.
Javascript代码
1. data = {
2. list:[
3. { id:"1",status"P"},
4. { id:"2",status"W"},
5. { id:"3",status"R"}
6. ],
nirvana什么意思
7. statusRenderer:function(){
8. if(this.status=="P"){
9. return'<b >通过</b>'
10. }el if(this.status=="W"){sdd>connsus
11. return'等待'
12. }el{
永远用英语怎么说
13. return'<b >拒绝</b>'
14. }
15. }
16. }
shipu这⾥的statusRenderer就是在数据这边扩展做的⼯作,{{{statusRenderer}}}在渲染时,this指向当前context,在取得status之后,经过判断,return正确的渲染字符串. 于是配合下⾯的模板就可以满⾜我们的要求
项⽬是很复杂的,如果需要写⽆数statusRenderer那会⾮常累,所以我想Renderer功能强⼤,在遇到各种特殊情况时,单独写⼀下未尝不可,但是想上⾯这种常见需求是需要抽象⼀下的.
⽐如我们希望如下这样的模板,完成同样的需求.
Html代码
1. <ul>
2. {{#list}}
3. {{#if(status==P)}}<li>ID:{{id}},status:<b style='color:green'>通过</b></li>{{/endif}}
4. {{#if(status==W)}}<li>ID:{{id}},status:等待</li>{{/endif}}
5. {{#if(status==R)}}<li>ID:{{id}},status:<b style='color:red'>拒绝</b></li>{{/endif}}
6. {{/list}}
7. </ul>
这个改造看起来⼀定是会伤筋动⾻的,因为完全打破了{{#xxx}}{{/xxx}}这种Mustache的嵌套模式.改过之后Mustache就不再是Mustache了.
于是我们在这⾥妥协下,把{{/endif}}改为{{/if(status==W)}},这样{{#if(status==W)}}{{/if(status==W)}}就配起对来了.
接下来我们就只要想办法从模板中把这类标签正则出来,然后为这类配对⾃动添加Renderer即可.
fe模板变成了下⾯这样: