Ember2.3 中如何为 select 元素的 onChange 动作传入多个参数

Question

我在一个循环中有一个 select 元素，我想要触发的动作需要有两个参数：selected 选项select 元素和我们正在循环的项目。我的代码如下所示：

{{#each loopItems as |loopItem|}}
 <select onChange={{action 'fireThis' loopItem target.value }}> 
  {{#each loopItem.subItems as |subItem|}}
    <option value={{subItem.id}}>{{subItem.value}}</option>
  {{/each}}
 </select>
{{/each}}

而我的 fireThis 动作是这样的：

fireThis:function(loopItem, value){
 //Do something here with both. 
 // like loopItem.set('thisProperty', value);
}

因此，在我的特定情况下，子项的数量是动态的，我需要使用 selected 子项及其当前所在的循环项。

除非重构为组件（现在，我不能那样做），我如何将多个参数传递给在 'onChange' 上触发的操作？

我试过：

<select onChange={{action 'fireThis' value ="loopItem target.value" }}> 
<select onChange={{action 'fireThis' value ="loopItem target.value" }}>
<select onChange={{action 'fireThis' loopItem value="target.value"}}>
<select onChange={{action 'fireThis' value="target.value" loopItem}}>

对于以上所有情况，我在函数中的两个参数都未定义（或导致另一个错误）。唯一有效的是：

<select onChange={{action 'fireThis' value="target.value"}}>

但这只给我子项，而不是循环项。

不幸的是，loopItems 是新创建的 Ember 对象，没有任何 ID 参数，所以我也不能给每个 select 元素一个唯一的 ID。传递多个参数的能力几乎可以解决我的整个问题。

Answer 1

试试这个：

<select onChange={{action 'fireThis' loopItem}}>

fireThis:function(loopItem){
 var value = this.$('option:selected').val();
 //Do something here with both. 
 // like loopItem.set('thisProperty', value);
}

Answer 2

我决定——正如他们所说——硬着头皮把整个东西包装成一个组件。我将每个 loopitem 传递到组件中 + 所有必需的对象以使事情正常进行，然后在组件内部，我使用了 value="target.value".

我重构的代码现在看起来像这样：

{{#each loopItems as |loopItem|}}
   {{loop-item-component loopItem=loopItem}}
{{/each}}

--

// Loop-item-component

    <select onChange={{action 'fireThis' value='target.value' }}> 
      {{#each loopItem.subItems as |subItem|}}
        <option value={{subItem.id}}>{{subItem.value}}</option>
      {{/each}}
    </select>

在组件中，然后，我将操作：

actions:{
 ...
    fireThis:function(value){
      let loopItem = this.get('loopItem');
      // Do something here with both. 
      // like loopItem.set('thisProperty', value);
    }
}

到目前为止，我还无法尝试其他建议的答案，但一旦尝试，我就会 post 将结果放在这里；学习如何将多个参数传递给由 select 元素的选项更改触发的操作仍然很有用。

Answer 3

有点晚了，但这里找到的答案有效： .

对于 OP 的解决方案，您可以这样包装它：

<select onChange={{action (action 'fireThis' loopItem) value="target.value"}}>

Answer 4

如果您需要传递多个参数，那么我建议您不要使用 value="target.value"。如果你使用它，它将从第一个参数 event object.

中得到 target.value

<select onchange={{action 'fireThis' loopItem}}>

并且在 firethis 操作中，您将在参数中收到 loopItem 和 event 对象。

actions:{
 firethis(loopItem,event)
 {
  //let selectedValue= event.tager.value;
 }
}

Ember2.3 中如何为 select 元素的 onChange 动作传入多个参数

How do I pass in more than one parameter to the onChange action for the select element in Ember2.3

ember.js

ember.js-2