让Mustache支持简单的IF语句

更新时间:2023-06-17 03:31:40 阅读: 评论:0

让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模板变成了下⾯这样:

本文发布于:2023-06-17 03:31:40,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/78/972554.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:模板   需要   依赖   体积
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图