首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

让Mustache支持简略的IF语句

2012-10-07 
让Mustache支持简单的IF语句Mustache是一种Logic-less templates.不支持if这类条件判断是Logic-less的显著

让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

做了很多扩展,社区也非常活跃,推荐。

收到 我看下 谢谢玉伯.

热点排行