是否可以在Ember Power Select中向onChange操作传递多个参数?

hm2xizp9  于 2023-08-04  发布在  其他
关注(0)|答案(3)|浏览(198)

我目前正在使用优秀的ember-power-select插件作为ember-bootstrap form的一部分。
我在表单上有多个下拉项,我试图将它们的处理方式统一到一个函数中,该函数可以用作power-select调用中的onChange操作:

  1. {{#form.element
  2. controlType="power-select"
  3. label="Destination"
  4. value=destinationSelection
  5. options=destinationOptions
  6. as |el|}}
  7. {{#el.control
  8. onChange=(action "setDropDown")
  9. searchField="name"
  10. as |item|}}
  11. {{item.name}}
  12. {{/el.control}}
  13. {{/form.element}}

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

  1. actions: {
  2. setDropDown(selected, string) {
  3. handleDropDown(selected, dropdown, this)
  4. }
  5. }
  6. function handleDropDown(selected, dropdown, controller) {
  7. let selection = `${dropdown}Selection`
  8. let modelid = `model.${dropdown}_id`
  9. set(controller, selection, selected)
  10. set(controller, modelid, selected.id)
  11. }


为了让它工作,我真的需要能够从组件调用的onChange部分向setDropDown操作传递一个字符串,否则我没有办法告诉处理程序函数它应该设置哪些特定的字段,而不需要为每个下拉列表创建一个操作。
但是,当我尝试传入多个参数时,如

  1. onChange=(action "setDropDown" "destination")


或者是

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


我失去了onChange操作的基本功能,将所选项作为它的第一个参数。
我浏览了文档,没有找到库作者向onChange动作传递多个参数的任何示例,我想知道是否可以在不破坏库功能的情况下实现。

qco9c6ql

qco9c6ql1#

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

  1. import { helper } from '@ember/component/helper';
  2. export function invokeFunction([prop, action]) {
  3. return function(){
  4. action(prop, ...arguments);
  5. }
  6. }
  7. export default helper(invokeFunction);

字符串
因此,我们在这里所做的是创建将由ember-power-select调用的函数。在这个函数中,我们首先使用prop调用原始操作,然后使用ember-power-select调用onchange函数的每个参数。
在您的模板中,当将您的操作传递给power-select时,调用此帮助器

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


然后你的动作会是

  1. actions: {
  2. dropdownChanged(keyToSet, selectedValue){
  3. this.set(keyToSet, selectedValue);
  4. }
  5. }


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

展开查看全部
pengsaosao

pengsaosao2#

Ember Bootstrap's Power Select integration为类似的用例提供了一个很好的API。让我给予个例子。
让我们以国家选择器为例。我们有一个国家列表,这些国家由一个对象列表表示,这些对象的两个字母的国家代码(由ISO 3166-1定义为id属性)和名称为name。所选国家/地区应在POJO模型上以国家/地区代码表示。

  1. export default Component.extend({
  2. // country code of country selected or null
  3. selectedCountry: null,
  4. // Using a computed property here to ensure that the array
  5. // isn't shared among different instances of the compontent.
  6. // This isn't needed anymore if using native classes and
  7. // class fields.
  8. countries: computed(() => {
  9. return [
  10. { id: 'us', name: 'United States of America' },
  11. { id: 'ca', name: 'Canada' },
  12. ];
  13. }),
  14. // Using a computed property with getter and setter to map
  15. // country code to an object in countries array.
  16. selectedCountryObject: computed('selectedCountry', {
  17. get() {
  18. return this.countries.find((_) => _.id === this.selectedCountry);
  19. },
  20. set(key, value) {
  21. this.set('selectedCountry', value.id);
  22. return value;
  23. }
  24. }),
  25. });

字符串
现在我们可以像预期的那样使用Ember Bootstrap Power Select:

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


免责声明:我自己还没有测试过这些代码,所以可能会有错别字,但我希望你能明白。

展开查看全部
zrfyljdw

zrfyljdw3#

您可以像这样在模板中添加第二个参数。所选选项将自动发送到功能。

  1. <PowerSelect
  2. @selected={{this.selectedPrice}}
  3. @options={{this.priceRange}}
  4. @onChange={{fn this.choosePrice "minPrice"}}
  5. class="w-64"
  6. as |price|
  7. >
  8. {{price.title}}
  9. </PowerSelect>

字符串
然后创建你的函数来处理点击,你需要定义2个参数。您在模板中定义的参数将始终首先出现,因此它应该是您的第一个参数。

  1. @action
  2. choosePrice(type, price) {
  3. // type will be 'minPrice'
  4. // price will be the option you selected
  5. }

展开查看全部

相关问题