在HandlebarJS中获取数组长度并检查数组是否为空的教程

在这个简短的教程中，我们了解了如何在handlebar模板的javascript中找到数组的长度，并举例说明。

数组上有一个长度属性，它在外面不起作用，但在{{each}}辅助类中起作用。

在handlebar javascript中的数组长度

如果json对象的数据类型是一个数组，我们可以使用长度属性，如下图的语法：

{{array.length}}

让我们声明json对象

 {
  numbers: ["one", "two","three"]
}

在html模板中，使用{{numbers.length}}来检查数组的长度:

Total records - {{numbers.length}}  

呈现的输出是

Total records - 3  

检查数组长度的辅助函数

让我们声明一个客户帮助类并注册，如下所示。

Handlebars.registerHelper('arraySize', function (data) {
  return data.length;
});

在模板中使用双括号语法访问辅助类

{{arraySize numbers}} // returns 3

如何在handlebar中检查数组或列表是否为空

有时，我们想检查数组长度为零或数组大小为空。

我们必须使用handlebar的if条件

array.length在handlebars的if拦截器中不起作用

相反，你可以使用数组来检查数组是否为空:

<div>
{{#if numbers }}
<p>Number array length is {{numbers.length}}</P>
{{else }}
Array is  empty
{{/if}}
</div>

我们也可以写一个自定义的帮助器来检查数组的长度是否为空或大于3

<div>
{{#isArrayEmpty numbers 0}}
array length is empty
{{else }}
<p>Number array length is {{numbers.length}}</P>
{{/isArrayEmpty }}
</div>

我们必须注册自定义帮助器

Handlebars.registerHelper('isArrayEmpty', function (a, b, options) {
'use strict';
   if (a.length===b) {
     return options.fn(this);
  }
  return options.inverse(this);
});

总结

你已经学会了如何检查数组长度和检查数组或对象或列表是否为空。