Length check in a handlebars.js {{#if}} conditional

It's not clear what your value is, a string or an array?

If it's an array, you don't need a helper! You can check if the item at length exists:

{{#if items.[20]}}

Here's a working example to display different messages if the user has one item, vs. multiple items:

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

Try it at http://tryhandlebarsjs.com/ with sample data like

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

Not needing a helper is very important for using Handlebars in dynamic templates for mail delivery services (Sparkpost, Sendgrid, Mandrill etc.), which don't allow defining helpers (though Sparkpost has a much richer syntax than Sendgrid).


Create Handlebars helper like below:-

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

and use this like:-

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

Demo


Just wanted to improve upon the accept answer, which is very correct and helpful but...

Instead of making it specifically for somethings length you can make it a greater than conditional and use it in other greater than situations.

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

and use like this:

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

This way you can compare lots of different things other than just the length.

You can also go one step further, let's consider that we may want to check that something is less than something else or equal to something else.

  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');
  });

Using the above helper we can compare all sorts of eventualities.

{{#compare jobTitle.length '>' 20}}
  {{#compare jobTitle.length '<=' 100}}
    <p>Greater than 20 and less than or equal 100</p>
  {{else}}
    <p>Greater than 100</p>
  {{/compare}}
{{else}}
  <p>Less than or equal to 20</p>
{{/compare}}

If you are finding it hard to understand how this helper works try reading Todd Mottos article on using object literals instead of the switch statement.