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

Question

我目前使用的是优秀的ember-power-select add on as part of an ember-bootstrap form。

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

{{#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}}

我的处理程序函数将简单地根据下拉菜单的 selection 设置一些值：

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)

}

为了让它工作，我真的需要能够从组件调用的 onChange 部分向 setDropDown 操作传递一个字符串，否则我无法告诉处理程序函数应该设置哪些特定字段，而无需为每个下拉菜单创建一个操作。

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

onChange=(action "setDropDown" "destination")

或

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

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

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

Answer 1

Ember Bootstrap's Power Select integration 给你一个很好的 API 用于像这样的用例。我举个例子。

让我们以国家选择器为例。我们有一个由对象列表表示的国家/地区列表，其中包含 two-letters ISO 3166-1 定义的国家/地区代码 id 属性和名称 name。所选国家/地区应在 POJO 模型中由国家/地区代码表示。

export default Component.extend({
  // country code of country selected or null
  selectedCountry: null,

  // Using a computed property here to ensure that the array
  // isn't shared among different instances of the compontent.
  // This isn't needed anymore if using native classes and
  // class fields.
  countries: computed(() => {
    return [
      { id: 'us', name: 'United States of America' },
      { id: 'ca', name: 'Canada' },
    ];
  }),

  // Using a computed property with getter and setter to map
  // country code to an object in countries array.
  selectedCountryObject: computed('selectedCountry', {
    get() {
      return this.countries.find((_) => _.id === this.selectedCountry);
    },
    set(key, value) {
      this.set('selectedCountry', value.id);
      return value;
    }
  }),
});

现在我们可以按预期使用 Ember Bootstrap 功率 Select:

{{#bs-form model=this as |form|}}  
  {{form.element controlType="power-select" property="selectedCountryObject" label="Country" options=this.countries}}
{{/bs-form}}

免责声明：我自己还没有测试过该代码，因此可能会有拼写错误，但我希望你能理解。

Answer 2

您可以使用专门的高阶辅助函数为 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 */)

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

Is it possible to pass multiple arguments to onChange action in Ember Power Select?

ember.js