Ember.js中如何在Handlebar模板内联判断数组是否为空？

问题 #

我有一个包含图标模板的Handlebar模板，代码如下：

<span class="icon {{unbound pperson.medical.diseases '=' 0 'hidden'}}">    
            <img class="icon" src="/assets/img/icons/icon.svg">             
</span>

我需要通过hidden类控制图标的显示与隐藏，当数据数组diseases为空时不显示图标，不为空时显示该图标。我尝试使用条件：

{{unbound pperson.medical.diseases '=' 0 'hidden'}}

但出现报错。我了解到可以编写Ember Handlebars函数来实现，但希望找到无需额外创建函数的内联解决方法，请问是否可行？

解决方案 #

当然可以用内联方式实现，不需要额外写函数。你可以利用Ember Handlebars内置的助手结合数组特性来完成判断，同时搭配unbound避免不必要的绑定更新，以下是几种可行的写法：

方法1：判断数组长度 #

直接通过数组的length属性判断是否为空，结合eq助手实现条件类添加：

<span class="icon {{unbound if (eq pperson.medical.diseases.length 0) 'hidden'}}">
  <img class="icon" src="/assets/img/icons/icon.svg">
</span>

当diseases数组长度为0时，会添加hidden类隐藏图标；数组非空时则不添加类，图标正常显示。

方法2：利用数组的“真假性”简化判断 #

在Handlebars中，空数组会被视为“假值”，非空数组是“真值”，可以用not助手直接判断：

<span class="icon {{unbound if (not pperson.medical.diseases) 'hidden'}}">
  <img class="icon" src="/assets/img/icons/icon.svg">
</span>

这种写法更简洁，空数组时(not pperson.medical.diseases)返回true，添加hidden类；数组有内容时返回false，不添加类。

兼容旧版Ember的写法 #

如果你的Ember版本较旧，不支持not助手，可以用unless替代：

<span class="icon {{unbound unless pperson.medical.diseases 'hidden'}}">
  <img class="icon" src="/assets/img/icons/icon.svg">
</span>

unless的逻辑是“当表达式为假时输出指定内容”，正好匹配空数组时添加hidden类的需求。

内容的提问来源于stack exchange，提问作者Sam Fisher