【问题标题】:How can I check multiple conditions in a Handlebars template?如何检查 Handlebars 模板中的多个条件?
【发布时间】:2018-07-10 16:21:44
【问题描述】:

我有一个 handelbars 页面,根据 json 中的标题项目,它会显示不同的内容。

到目前为止,这是使用 helper if_wq

构建的

例如 if title = test 这有效

我想要一种方法来扩展此功能以显示 if title = testcolors.href = /test

所以条件只有在两个条件都为真时才有效。

我的代码示例

 {{#if_eq title 'test'}}
        True
    {{/if_eq}}

我的助手任务示例

handlebars.Handlebars.registerHelper('if_eq', function(a, b, opts) {
    if (a === b) {
        return opts.fn(this);
    } else {
        return opts.inverse(this);
    }
});

我的 json 示例

"range-list-page": {     
  "ranges": [            
    {                    
    "title": "test",  
  "colors": [                                               
    {                                                       
      "color": "#fff",                                      
      "label": "White",                                     
      "bordered": true,                                     
      "href" : "/test"      
    },                                                      
    {                                                       
      "color": "#F3DCAE",                                   
      "label": "Cream",                                     
      "href" : "http://google.com"                          
    },                                                      
    {                                                       
      "color": "#C5B7B0",                                   
      "label": "Cashmere",                                  
      "href" : "http://google.com"                          
    },                                                      
    {                                                       
      "color": "#D0B193",                                   
      "label": "Larch",                                     
      "href" : "http://google.com"                          
    }                                                       
  ]             

【问题讨论】:

标签: html arrays json conditional handlebars.js


【解决方案1】:

我定义了以下辅助方法:

(1) eq - 你已经有了,

Handlebars.registerHelper('eq', function(a, b) {
    if(a == b) // Or === depending on your needs
        return true;
    else
        return false;
}); 

(2) and - 请参阅下面的重要说明。

Handlebars.registerHelper('and', function () {
    // Get function args and remove last one (meta object); every(Boolean) checks AND
    return Array.prototype.slice.call(arguments, 0, arguments.length - 1).every(Boolean);
});

注意:如您所见,我必须在执行Array.prototype.slice.call 之前从arguments 中删除最后一个参数,因为这里返回的最后一个参数是一个元对象。如果您不修剪参数的最后一个结果,那么every(Boolean) 将给出错误的结果。否则它只是一个every(Boolean)

(3) 现在,假设我们有这 2 个助手,下面的示例可以检查 AND/EQ:

{{#if (and (eq var1 'STRING1') (eq var2 'STRING2') ) }}
...
{{/if}}

【讨论】:

  • hmm 插件 'gulp-compile-handlebars' 中似乎出现错误 TypeError 消息:((helpers.title || (depth0 && depth0.title)) || alias2).call is not a function
  • 奇怪,Gulp 会以某种方式改变这个建议吗?您使用的是特定版本的把手吗?我的是这个:Handlebars v4.0.11handlebars.min.js。我没有使用 Gulp。
  • 好点,如果是这样的问题,请检查并接受答案,谢谢
  • 还有一件事,检查您如何调用{{#if}...,检查所有括号。请注意上面的顺序以及不同子句的分组方式。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-11-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多