Handlebars能否根据属性值从数组中获取对应匹配对象？

核心结论 #

• Handlebars 原生不支持你示例中 {{ food[@fruit:apple].color }} 这类直接按属性值匹配提取数组元素的语法
• 该需求需要通过自行编写、注册自定义 helper 实现

自定义 helper 实现方案 #

1. 注册 helper 代码 #

// 注册按属性值查找数组对象的helper
Handlebars.registerHelper('findItemByAttr', function (arr, attrKey, attrValue) {
  // 遍历数组返回第一个属性匹配的对象
  return arr.find(item => item?.[attrKey] === attrValue) || {};
});

如果需要兼容更低版本的 JavaScript 环境，可以把 find 方法替换为普通 for 循环实现：

Handlebars.registerHelper('findItemByAttr', function (arr, attrKey, attrValue) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] && arr[i][attrKey] === attrValue) {
      return arr[i];
    }
  }
  return {};
});

2. 模板中使用示例 #

完全匹配你需求的写法如下：

{{ (findItemByAttr food 'fruit' 'apple').color }}

运行后会直接输出 red，和你预期的效果一致。

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