如何在Ember Power Select模板端将多选值转为字符串？

你好呀！针对你的需求，不推荐直接在模板层面完成值的转换——毕竟Ember的设计理念里，模板更适合做UI渲染和数据绑定，数据转换这类逻辑放在控制器、组件或者路由里会更清晰，也方便后续维护和测试。不过我会给你两种方案，包括一种勉强能在模板层面实现的方式，以及更符合最佳实践的做法。

推荐方案：用自定义Action处理转换 #

这是最稳妥的方式，把转换逻辑封装在Action里：

1. 在对应控制器/组件中定义Action #

假设你的代码在控制器里，添加如下Action：

actions: {
  updateOwners(selectedNames) {
    // 把选中的数组转成逗号分隔的字符串
    this.set('experiment.owners', selectedNames.join(', '));
  }
}

2. 修改模板中的Power Select配置 #

注意：多选组件的selected属性需要接收数组，但你最终存在experiment.owners里的是字符串，所以回显时需要把字符串拆分成数组，用Ember内置的split助手即可：

{{#power-select-multiple 
  options=names 
  selected=(split (or experiment.owners '') ', ') 
  placeholder="Add owners" 
  onchange=(action "updateOwners") 
  as |name| 
}} 
  {{name}} 
{{/power-select-multiple}}

(or experiment.owners '')是为了处理初始值为空或null的情况，避免split报错。

模板层面的“勉强实现”方式（不推荐） #

如果你一定要在模板里完成，可以借助Ember的fn助手组合转换逻辑，但这种方式可读性差、后续维护成本高，尽量不用：

{{#power-select-multiple 
  options=names 
  selected=(split (or experiment.owners '') ', ')
  placeholder="Add owners" 
  onchange=(action (mut experiment.owners) (fn join ', '))
  as |name| 
}} 
  {{name}} 
{{/power-select-multiple}}

这里(fn join ', ')会先把选中的数组转成字符串，再通过mut赋值给experiment.owners，但这种把业务逻辑塞在模板里的写法，违背了Ember的分层设计原则哦。

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