Ember 3.0自定义helper返回undefined-undefined问题求助

你遇到的问题根源在于Ember Helper的参数传递规则——Ember的自定义helper函数接收的不是单个参数，而是一个包含所有传入值的数组。

问题拆解 #

你当前的helper函数定义是这样的：

export function shopName(shop) { 
  return shop.identifier + '-' + shop.name; 
}

但当你在模板里调用{{shop-name shop}}时，Ember会把传入的shop对象打包成一个数组（也就是[shop]）传递给shopName函数。这时候你的shop变量实际指向的是这个数组，而非你期望的店铺对象，所以访问shop.identifier和shop.name自然会得到undefined，最终输出undefined-undefined。

修复方案 #

有两种简洁的修复方式：

方式1：解构参数数组（推荐）

直接在函数参数里解构出需要的对象，代码更直观：

import { helper } from '@ember/component/helper';

export function shopName([shop]) { 
  return shop.identifier + '-' + shop.name; 
}

export default helper(shopName);

方式2：通过数组索引获取参数

如果你习惯更传统的写法，也可以直接从参数数组中取出第一个元素：

import { helper } from '@ember/component/helper';

export function shopName(params) { 
  const shop = params[0];
  return shop.identifier + '-' + shop.name; 
}

export default helper(shopName);

扩展提示 #

如果你的helper需要接收多个参数（比如{{shop-name shop 'prefix'}}），解构写法会更清晰：

export function shopName([shop, prefix]) { 
  return `${prefix}-${shop.identifier}-${shop.name}`; 
}

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