如何将多个参数传递给 Ember2.3 中选择元素的 onChange 操作答案

【问题标题】：How do I pass in more than one parameter to the onChange action for the select element in Ember2.3如何将多个参数传递给 Ember2.3 中选择元素的 onChange 操作
【发布时间】：2016-02-11 19:13:30
【问题描述】：

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

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

因此，在我的特定情况下，子项的数量是动态的，我需要将选定的子项与它当前所在的 loopItem 一起使用。

除非重构为组件（现在，我不能这样做），我如何将多个参数传递给在“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"}}>

但这只会给我 subItem，而不是 loopItem。

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

【问题讨论】：

标签： ember.js ember.js-2

【解决方案1】：

有点晚了，但在这里找到的答案有效： ember 2 parameters in a action of a select menu.

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

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

【讨论】：

【解决方案2】：

试试这个：

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

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

【讨论】：

也试过了（错过了这个问题，我的错。）在这种情况下，loopItem 很好，但 value 参数未定义。使用'target.value'，值是'target.value'作为一个字符串。
这是视图，不是组件？你可能需要view.target.value

【解决方案3】：

我决定——正如他们所说——硬着头皮把整个东西包装成一个组件。我将每个循环项传递给组件 + 所有必需的对象以使事情正常工作，然后在组件内部，我使用了 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);
    }
}

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

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：