I'm trying to figure out how to set a new Ember Data Record's attribute's value based on choices in a select element, using the {{action}} helper. Here's my situation, simplified:
item.js route. Creates a new record that is available in the template.
model() {
return this.store.createRecord('item');
}
new-item.hbs template. The select-element triggers the action to set the new item's color attribute.
<select {{action 'setColor' model value="target.value" on="change"}}>
<option value="">choose</option>
<option value="white">white</option>
<option value="blue">blue</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
</select>
item.js controller.
actions: {
setColor(item, option) {
console.log(option);
record.set('color', option);
console.log(item);
}
}
Console.log(option) returns nothing. The record.set works fine, I can hardcode the option and the console.log(item) will show that the new item object has the color attribute set.
On the other hand, if I do the action call with just
onChange={{action 'setColor' value="target.value"}}
the color gets logged correctly from the action. But if I add "model" into that action call as before with the {{action ... on="change"}} syntax, console.log(option) returns undefined and console.log(item) returns an Event with no model object attached.
Question is: How do I pass both the target.value and the model to the setColor action?
