分类
js

记一个踩过三次的坑……

Handlebars.js在遇到形如{{#value}}{{/value}}的模板,且value为object时,会以value为环境查询里面的内容,和mustache.php的表现不一致,可能导致差异。

图文无关。太长时间没写文被降权了么,怎么最近流量跌这么厉害……

老后台的架构仍然是PHP渲染页面,这里我选择mustache.php作为模板引擎。在某些场景下(比如搜索),我希望在前端使用复用同样的模板。正如前面一篇文章所说,我选择的是Handlebars.js,它号称支持mustache语法。

然则在使用当中,我发现二者的实现仍然是有区别的。先上模板。

    {{#value}}{{value}}{{/value}}

这段模板很简单,检查value是否存在,如果是的话则将其输出。这时:

  • mustache.php先以value作为逻辑判断依据;接下来,在value里找不到value这个key,便回到上一层,输出value的值
  • 而在handlebars.js眼中,{{value}}的类型也是很重要的,如果是String或者Number,那就直接输出;如果是Object,它就会采用{{#with ..}}{{/with}}操作,从value里面取值,而value里没有value,所以输出空。

当模板为

    {{#has_value}}{{value}}{{/has_value}}

此时,因为has_value是布尔值,所以Handlebars.js放弃把这个对象当做执行环境,而是继续维持当前的层级,所以就能正确输出value的值。


这个问题虽然不很复杂,但是调试起来并不方便,而且文档中也没提过,所以三次踩坑每次都耽误不少时间。记录如此,避免再次遭遇。

由meathill

爱编程,爱旅游,爱吐槽。
今年的目标是完成并运营至少一个 Side Project。
《Electron + Vue 实战开发》龟速创作中……

欢迎吐槽,请勿装死

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据