在handlebars.js {{#if}}条件下检查长度

时间:2015-03-11 04:47:49

标签: jquery handlebars.js

handlebars JS中是否有办法检查值的长度?像这样:

{{#if value.length > 20}
..do something
{{else}}
..do something
{{/if}}

3 个答案:

答案 0 :(得分:10)

创建Handlebars帮助器,如下所示: -

Handlebars.registerHelper('checklength', function (v1, v2, options) {
'use strict';
   if (v1.length>v2) {
     return options.fn(this);
  }
  return options.inverse(this);
});

并使用它: -

      {{#checklength jobTitle 20}}   //jobtitle is property and 20 is length
             <p>Up to 20</p>
      {{else}}
             <p>Less then 20</p>
      {{/checklength}}

Demo

答案 1 :(得分:9)

只是想改进接受答案,这是非常正确和有帮助的但是......

不是专门针对某些事情长度而是使其大于条件,而是在其他更大的情况下使用它。

error C2760: syntax error: expected ')' not ']'

并使用如下:

Handlebars.registerHelper('greaterThan', function (v1, v2, options) {
'use strict';
   if (v1>v2) {
     return options.fn(this);
  }
  return options.inverse(this);
});

通过这种方式,您可以比较许多不同的东西,而不仅仅是长度。

你也可以更进一步,让我们考虑一下我们可能想要检查某些东西是否小于其他东西或等于其他东西。

{{#greaterThan jobTitle.length 20}}
  <p>Up to 20</p>
{{else}}
  <p>Less then 20</p>
{{/greaterThan}}

使用上面的帮助我们可以比较各种可能性。

  Handlebars.registerHelper('compare', function (v1, operator, v2, options) {
    'use strict';
    var operators = {
      '==': v1 == v2 ? true : false,
      '===': v1 === v2 ? true : false,
      '!=': v1 != v2 ? true : false,
      '!==': v1 !== v2 ? true : false,
      '>': v1 > v2 ? true : false,
      '>=': v1 >= v2 ? true : false,
      '<': v1 < v2 ? true : false,
      '<=': v1 <= v2 ? true : false,
      '||': v1 || v2 ? true : false,
      '&&': v1 && v2 ? true : false
    }
    if (operators.hasOwnProperty(operator)) {
      if (operators[operator]) {
        return options.fn(this);
      }
      return options.inverse(this);
    }
    return console.error('Error: Expression "' + operator + '" not found');
  });

如果您发现很难理解这个助手是如何工作的,请尝试使用对象文字而不是switch语句阅读Todd Mottos article

答案 2 :(得分:7)

不清楚您的value是什么,是字符串还是数组?

如果是数组,则不需要帮助器!您可以检查length处的项目是否存在:

{{#if items.[20]}}

这是一个有效的示例,用于显示用户有一个项而不是多个项的不同消息:

{{#if items.[1]}}
You have the following items:
{{#each items}}
* {{this}}
{{/each}}
{{else}}
You have one item: {{items.[0]}}
{{/if}}

http://tryhandlebarsjs.com/尝试使用类似示例数据的

{
  items: ["foo", "bar"]
}

对于在动态模板中为邮件传递服务(Sparkpost,Sendgrid,Mandrill等)使用把手的情况下,不需要助手是非常重要的,这些工具不允许定义助手(尽管Sparkpost的语法比Sendgrid丰富得多)。 / p>