让Mustache支持简单的IF语句
Mustache是一种Logic-less templates.不支持if这类条件判断是Logic-less的显著特征之一.Mustache的另一个特征是体积小,不依赖其他前端类库,在浏览器端和NodeJS中都可以运行.
并非Logic-less.Mustache的体积小,无依赖,前后兼容才是我们当前的项目选择这套模板系统的真正原因.没有IF有时候感觉并不给力,所以就想办法简单扩展下Mustache,让其具有一些通用的条件判断能力.
比如如下的应用场景,我们需要根据某一字段的值,决定输出有意义的中文,并用颜色加以修饰.
status=="P" ==> <b style="color:green">通过</b>
status=="W" ==> 等待
status=="R" ==> <b style="color:red">拒绝</b>
Logic-less模板实现这个功能就需要在数据上下功夫,如下.
看起来这样做的好处是保持了Mustache的配对风格,并且继续无缝支持原生的嵌套以及否定等语法.
但看起来模板挺丑的,性能损耗也一定是有不少的.
后续的扩展,我想elseif肯定不能支持了,if中带"与""或"判断倒是还方便添加的.
当然还可以做很多扩展,比如给数组增加一些内置属性如"_index_", "_first_", "_last_", "_odd_", "_even_".
Mustache仍然足够简单,它本身就具有循环和否定判断等特性,增加了IF后,稍微加了点逻辑,但能少写很多Renderer.
重要的是我们依然保有我们所看重的东西:体积小,无依赖,前后兼容.
在我的项目里破坏了Logic-less是我的事情并不接受批判,但请大家根据自己实际情况谨慎选择.
刚刚接触Mustache,各种特性还在学习摸索中,现在看起来Lambda和子模板等特性,让Mustache的JS实现小巧却功能强大.
或许今天的需求还有更好的解决方案,如果有同学知道还望不吝赐教.
1 楼 lifesinger 2011-05-30 木头,看看这个:
http://writing.jan.io/mustache-2.0.html
在 mustache 2 出来前,可以尝试:
https://github.com/wycats/handlebars.js
做了很多扩展,社区也非常活跃,推荐。 2 楼 limu 2011-05-30 lifesinger 写道木头,看看这个:
http://writing.jan.io/mustache-2.0.html
在 mustache 2 出来前,可以尝试:
https://github.com/wycats/handlebars.js
做了很多扩展,社区也非常活跃,推荐。
收到 我看下 谢谢玉伯.