ember.js - 是否可以将多个参数传递给 Ember Power Select 中的 onChange 操作？

Question

我目前正在使用优秀的ember-power-select作为 ember-bootstrap form 的一部分添加.

我在表单上有多个下拉项目，我试图将它们的处理方式统一到一个可以用作 onChange 的函数中。 power-select 调用中的操作:

{{#form.element 
    controlType="power-select" 
    label="Destination" 
    value=destinationSelection
    options=destinationOptions
    as |el|}}
    {{#el.control   
        onChange=(action "setDropDown")
        searchField="name"  
        as |item|}}
        {{item.name}}
    {{/el.control}}
{{/form.element}}

我的处理函数将根据下拉列表的选择简单地设置一些值:

actions: {
     setDropDown(selected, string) {
      handleDropDown(selected, dropdown, this)
    }
}

function handleDropDown(selected, dropdown, controller) {
  let selection = `${dropdown}Selection`
  let modelid = `model.${dropdown}_id`

  set(controller, selection, selected)
  set(controller, modelid, selected.id)

}

为了使它工作，我真的需要能够将字符串传递给 setDropDown来自 onChange 的行动组件调用的一部分，否则我无法告诉处理函数它应该设置哪些特定字段，而无需为每个下拉列表创建操作。

但是，当我尝试传入多个参数时

onChange=(action "setDropDown" "destination") 

或者

onChange=(action "setDropDown" selected "destination")

我失去了 onChange 的基本功能将所选项目作为第一个参数的操作。

我查看了文档，找不到库作者将多个参数传递给 onChange 的任何示例。行动并想知道是否可以在不破坏库功能的情况下进行。

Answer 1

您可以使用专门的高阶辅助函数为 ember-power-select 创建一个操作。这最终将使用额外的参数调用您的操作。考虑这个助手 handle-dropdown

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

export function invokeFunction([prop, action]) {
    return function(){
        action(prop, ...arguments);
    }
}

export default helper(invokeFunction);

所以我们在这里所做的是创建将由 ember-power-select 调用的函数。 .在这个函数中，我们使用 prop 调用原始操作。首先，后面是 ember-power-select 的每个参数调用了我们的 onchange功能与。

在您的模板中，将您的操作传递给 power-select 时调用此帮助程序。

{{#power-select 
   onchange=(handle-dropdown 'foo' (action 'dropdownChanged')) 
   as |dropdown|}}

然后你的行动将是

actions: {
  dropdownChanged(keyToSet, selectedValue){
    this.set(keyToSet, selectedValue);
  }
}

这最终会调用 dropdownChanged('foo', /* the selected value */)