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

问题

I have a select element within a loop, and the action I want to be triggered needs to have two parameters: the selected option of the select element and the item we are looping with. My code looks like so:

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

And my fireThis action is like so:

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

So, in my particular case, the number of subItems is dynamic, and I need to use the selected subItem with the loopItem it is currently under.

Barring refactoring into components (right now, I cannot do that), how would I pass in more than one parameter to the action fired on 'onChange'?

I have tried:

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

For all of the above, both my params in the function are undefined (or cause another error). The only one that works is:

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

But that only gives me the subItem, not the loopItem.

Unfortunately, the loopItems are newly created Ember Objects, void of any ID parameters, so I cannot give each select element a unique ID either. The ability to pass more than one parameter would pretty much solve my entire problem.

回答1:

A bit late, but the answer found here works: ember 2 parameters in a action of a select menu.

For OP's solution you wrap it like so:

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

回答2:

Try this:

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

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

回答3:

I decided to -as they say- bite the bullet and wrap the entire thing into a component. I passed each loopitem into the component + all required objects to make things work, then inside the component, I used value="target.value".

My refactored code looks like this now:

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

Within the component, then, I put the action:

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

I have not been able to try out the other suggested answers so far, but as soon as I do, I will post the results here; it would still be useful to learn how to pass multiple parameters to an action triggered by a change in the options of a select element.

回答4:

If you need to pass more than one parameter then I would encourage not to use value="target.value". if you use that it will get target.value from first argument event object.

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

and in firethis action, you will receive loopItem and event object in the parameter.

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

来源：https://stackoverflow.com/questions/35348059/how-do-i-pass-in-more-than-one-parameter-to-the-onchange-action-for-the-select-e

标签

ember.js

ember-2.0.0